JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Il secondo passo è quello di intercettare il click sui nostri link: Prototype facilita molto la gestione degli eventi, attraverso l'oggetto event e il metodo observe. Essendo l'array dei nostri elementi (estratti con $$) un enumerable, possiamo iterare su ognuno di questi e al verificarsi dell'evento eseguire la funzione di callback che produrrà lo scrolling.

Da non sottovalutare il fatto che è necessario bloccare l'azione predefinita del click sul collegamento, che, altrimenti, seguendo il link impedirebbe il funzionamento dello script.

Ora possiamo esaminare la funzione di callback che produce l'effetto di scorrimento della pagina: entra in gioco Scriptaculous. Viene infatti creata una nuova istanza di Effect.scrollTo, a cui viene passato l'id dell'elemento che vogliamo raggiungere: tale id viene estratto leggendo il valore dell'attributo href dell'elemento cliccato, ed eliminando il # all'inizio della stringa.

Per attivare il codice esaminato, in luogo del vecchio window onload, con Prototype possiamo utilizzare document.observe, che intercetta l'evento dom:loaded; in pratica lo script viene eseguito non appena sia disponibile l'albero DOM del documento, senza attendere il caricamento degli elementi esterni alla pagina(ad esempio le immagini).

Il codice di Jquery

Questo esempio include JQuery 1.3.1 in versione compressa, prelevata direttamente dal sito ufficiale. Devo dire che il codice dello script è molto simile al precedente e non necessita di tante spiegazioni:

<script type="text/javascript">
$(document).ready(function(){
	$('a[href^=#]:not([href=#])').click(function(e){
  		$('html, body').animate({ 
                 scrollTop: $($(this).attr("href"))
                 .offset().top }, 1000);
   		 e.preventDefault();

 	});
});
</script>

Anche JQuery dispone di un metodo simile a document.observe per intercettare l'evento domready della pagina: si chiama document.ready. Inoltre, la funzione $() attraverso i selettori CSS permette di operare subito sull'array degli elementi restituiti, senza effettuare cicli o iterazioni. Che dire? Molto veloce! Per bloccare il comportamento di default dei link in questo caso si utilizza event.preventDefault(), ma avremmo potuto mettere anche un classico return false. Il movimento di scrolling è delegato all'effetto animate(), che si applica sull'elemento e accetta diversi parametri opzionali, compresa anche una eventuale funzione di callback.

Per chi fosse interessato, non posso non citare l'interessante plugin ScrollTo scritto da Ariel Flesler che in tema di scrolling ci consente di ottenere molteplici soluzioni con estrema semplicità.

Il codice di Mootools

Anche il codice scritto con MooTools è molto simile ai precedenti, anzi presenta particolare affinità soprattutto con quello del “cugino” Prototype: l'esempio richiede il core 1.2.1, naturalmente la versione più aggiornata, e l'inclusione dell'effetto fx.scroll. Prelevando i file dal sito ufficiale, possiamo scegliere la versione compressa con l'utilità di YUI.

Per onore di completezza, c'è da dire che esiste anche una classe che estende fx.scroll (e che ne è figlia), che è stata appositamente creata per gestire lo scrolling degli elementi, Smoothscroll. L'utilizzo è veramente semplice e si presta perfettamente alla nostra causa: eccone un esempio. Basta creare una nuova istanza di SmoothScroll ed il gioco è fatto. Ecco il codice:

<script type="text/javascript">
window.addEvent('domready',function() { new SmoothScroll({ duration: 1000 }); });
</script>

Tutti gli esempi sono disponibili per il download.

Altri articoli

Altre guide

Altre newsletter