jQuery scrollTo per navigare nella pagina…
La fantastica libreria jQuery ci viene in soccorso anche di fronte alla necessità di realizzare siti su un un’unica pagina, ma che possano essere facilmente navigabili in tutte le direzioni con un solo click. Questo lavoro è possibile grazie al prezioso plugin scrollTo, sviluppato da Ariel Flasher. Per quanto il plugin sia ricco di esempi non si trova, a mio avviso, una spiegazione semplice e lineare su come utilizzarlo. Vediamo quindi come implementarlo in modo molto semplice per ottenere risultati davvero gradevoli. Ne va da sè che una volta capito il funzionamento le possibilità di utilizzo, grazie alla documentazione offerta, aumentano.
Esempi di utilizzo
Nella spiegazione vedremo come realizzare un sito a navigazione verticale, di cui potete vedere l’esempio:
Esempio di sito a singola pagina con navigazione a scroll verticale
Non verrà invece dettagliata la navigazione orizzontale anche se lascio a disposizione di tutti un’esempio da, eventualmente, scaricarsi e replicare:
Esempio di sito a singola pagina con navigazione a scroll orizzontale
Il markup html ed il codice javascript
Prima di tutto dobbiamo importare le librerie jQuery, lo script scrollTo e creare un file che chiameremo easing.js che permette di dare l’effetto easing desiderato. Questo file dovrà includere il seguente codice:
jQuery(function( $ ){
$.scrollTo.defaults.axis = 'xy';
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
});Il markup html del nostro documento sarà invece il seguente:
Come possiamo vedere troviamo il codice javascript già inserito all’interno dei link che si occupano di muovere la nostra pagina. Quello che accade al click è semplicemente di scrollare la pagina fino al punto indicato. Punto rappresentato dall’ ID dell’oggetto a cui si vuole arrivare, e che dovrà coincidere con i valore scritto all’interno della stringa $.scrollTo( '#t3', 500, {easing:'linear'} );. Il numero, 500, indica invece la durata della transizione.
E’ bene sottolineare che lo script accetta anche altri valori oltre all’ID, quali, ad esempio la posizione assoluta in pixel. Vi rimando sempre alla documentazione ufficiale per queste variazioni.
Easing:linear invece indica il tipo di transizione da eseguire nel passaggio da un punto all’altro. Oltre a linear è possibile utilizzare di default solo l’effetto swing. Per una disponibilità maggiore di effetti easing sarà necessario includere nel progetto la libreria jQuery UI.
Il css
Il css utilizzato nell’esempio non presenta particolarità significative, di conseguenza potete liberamente copiarlo e riadattarlo prendendolo dalla demo proposta. L’unica annotazione che vorrei fare riguarda la navigazione orizzontale. Utilizzando infatti questo script, come avrete notato, la schermata si muove e si blocca nel vertice in alto a sinistra dell’oggeto di destinazione. Ne va da sè che risulterebbe impossibile quindi creare spazi laterali ai box in quanto tutto viene portato nell’angolo in alto a sinistra del browser (anche mettendo dei margin funziona, il padding è un’alternativa ma meno flessibile in questo caso). Un modo per evitare che ciò accade è quello di utilizzare una tecnica che ricorda un po’ gli “spacer” che si usavano con le tabelle. Si creeranno dei div “ancore” vuoti che simulino lo spazio desiderato, in modo che diventino loro i target dei nostri click. Non si tratta certo di una soluzione elegante ma resta comunque molto funzionale 🙂
Download esempi
A questi 2 link potrai anche scaricare uno zip con l’esempio funzionante utilizzato:
