Da quel calderone di effetti ed esperimenti che è questa sorta di new wave del Javascript, sono emerse nei mesi scorsi diverse sperimentazioni relative al cosiddetto smooth scrolling (o scrolling morbido, se preferite). Di cosa si tratta? Di un effetto pensato esplicitamente per la navigazione di pagine 'lunghe' con una serie di link interni (si pensi come scenario tipico ad una lista di FAQ). Il classico salto 'avanti e indietro' all'interno della pagina viene sostituito, appunto, da un scorrimento soft della stessa. Meglio lasciar parlare l'esempio.
Una panoramica sulle diverse varianti del'effetto la trovate in un post del nostro blog. Qui presentiamo lo script elaborato da Stuart Landgridge, per molti versi un esempio perfetto di Javascript non intrusivo. In presenza di browser che abbiano Javascript disabilitato, infatti, l'effetto è semplicemente ignorato e le funzionalità di navigazione non sono assolutamente compromesse. Il codice HTML, poi, è quanto di più pulito si possa immaginare. Lo script infatti non fa altro che identificare tutti i link presenti nella pagina, separare quelli interni (con il #) dagli altri, collegare a ciascuno di essi tramite l'evento onclick la funzione smoothScroll che gestisce l'animazione e l'effetto.
È disponibile per il download il file smoothscroll_dl.zip. Contiene, oltre all'esempio già visto, una copia dello script smoothscroll.js.
L'implementazione è delle più semplici. Basta realizzare la pagina HTML come si è sempre fatto, concependo la struttura come se non si dovesse applicare alcun effetto particolare! Piccolo ripasso.
Per l'esempio, abbiamo inserito all'interno della pagina una serie di link interni (ancore) nei punti chiave del sistema di navigazione. La prima è giusto all'inizio della pagina. È lì che si torna quando si clicca sul collegamento 'Torna su' posto in fondo a ciascuna sezione:
<h1><a name="top">Esempio di smooth scrolling</a></h1>
Ognuna delle 6 sezioni (nello specifico sono 6 paragrafi) è stata poi marcata allo stesso modo (ognuno potrà ovviamente usare proprie convenzioni per i nomi, lo script funziona comunque):
<h2><a name="p1">Paragrafo 1</a></h2>
..............
<h2><a name="p2">Paragrafo 2</a></h2>
In alto, per concludere, il menu di navigazione, con i link interni richiamati attraverso il consueto simbolo #:
<p><a href="#p1">Paragrafo 1</a></p>
<p><a href="#p2">Paragrafo 2</a></p>
<p><a href="#p3">Paragrafo 3</a></p>
<p><a href="#p4">Paragrafo 4</a></p>
<p><a href="#p5">Paragrafo 5</a></p>
<p><a href="#p6">Paragrafo 6</a></p>
Per aggiungere lo scrolling morbido, c'è da fare solo una cosa. Collegare smoothscroll.js alla pagina e lasciare che sia lui a fare tutto il lavoro! Il codice è il solito:
<script src="smoothscroll.js" type="text/javascript"></script>
Tutto facile, come si vede, per un effetto non invasivo e sicuramente accattivante.
