Ovvio che si può
Ma ogni effetto si fa in modo diverso; non so dirvi di plugin che lo facciano, ma il mio modo preferito di operare è direttamente via codice, perché garantisce la leggerezza ed efficienza massime;
in particolare quello che hai indicato (smoothscroll) è un plugin jQuery, che utilizzo correntemente in uno dei miei siti:
http://globalmountain.it/index.php/chi-siamo-contattiCome potete vedere al click sul nome di una delle Guide Alpine, si attiva l'effetto...
Vediamo come fare:
1 - Se il vostro template già non la utilizza, occorre integrare la libreria jQuery e la chiamata al noConflict mode, per evitare conflitti con altri effetti nel sito
<!-- Libreria jQuery, jQueryUi e chiamata noConflict -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$.noConflict();
// Il codice che usa la variabile $ di altre librerie può essere messo qui...
</script>
Queste righe vanno messe nella pagina index.php del template che usate, all'interno dei tag <head> e </head>.
Con questo codice integro la libreria dal servizio hosting di google libraries, così evito di averne una copia locale.
La seconda riga carica jQueryUi (per smoothscroll non serve, potete anche non metterla);
2 - Dalla pagina gitHub ufficiale del progetto (
https://github.com/kswedberg/jquery-smooth-scroll) scarico il pacchetto Zip, lo estraggo, prendo il file che mi interessa ovvero "jquery.smooth-scroll.js", e lo modifico per il noConflict mode (si sostituisce in tutto il file il carattere "$" con la stringa "jQuery");
in alternativa prendetelo dal mio sito che è già modificato:
http://globalmountain.it/media/scrollto/jquery.smooth-scroll.js(click col tasto destro -> salva con nome)
Dopodiché ne fate l'upload sul vostro sito, non importa dove, quello che importa è solo che sappiate dove lo mettete (propongo una sottocartella del template che usate, magari chiamatela "js");
3 - anche questo file va integrato tra i tag <head> e </head> della pagina index.php del vostro template, ma assolutamente DOPO la chiamata di jQuery e noConflict:
<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script>
ovviamente va messa col percorso relativo rispetto all'index.php, per cui se non avete messo il file dentro la sottocartella "js" del template, dovete cambiare di conseguenza il percorso;
4 - SmootScroll va attivato con queste righe, che vanno messe immediatamente sotto le precedenti:
<!-- Attivazione smoothscroll -->
<script>
jQuery(document).ready(function() {
jQuery('a.smoothscroll').smoothScroll();
});
</script>
5 - Fatto questo il plugin è attivo; esso agisce sui link HTML <a href=...
Il link deve recare la classe "smoothscroll" e nell'attributo href un ID CSS di un blocco della pagina;
Faccio l'esempio per chiarire riferendomi alla pagina del mio sito che ho linkato sopra:
Ho una barra in cima che contiene i link con i nomi delle Guide fatta così:
(queste parti di codice vanno invece inserite nella pagina, cioé ad esempio in un articolo utilizzando l'editor di joomla in modalità codice (per poter inserire dell'HTML))
<a class="smoothscroll" href="#port358">Adriano</a>
<a class="smoothscroll" href="#port378">Daniele</a>
<a class="smoothscroll" href="#port377">Silvio</a>
Questo crea i link, ovviamente se cliccati non fanno nulla a meno che il plugin non trovi nella pagina dei blocchi con gli ID indicati; nella pagina ho dei DIV che racchiudono ognuno le informazioni di ogni Guida:
<div id="port358">Adriano .... </div>
<div id="port378">Daniele .... </div>
<div id="port377">Silvio.... </div>
E' tutto; cmq questo effetto NON naviga tra le pagine, bensì tra diversi blocchi della stessa pagina
