Smooth Scroll: l’effetto di scorrimento verticale fluido

Lo Smoth Scroll è un effetto di scorrimento “dolce” tra un punto e l’altro di una pagina: cliccando sopra ad un elemento è quindi possibile raggiungere un’area diversa con una animazione di scorrimento progressivo.

Come si implementa lo Smooth Scroll

Per aggiungere questa funzionalità alle pagine del nostro sito basta utilizzare una piccola funzione JavaScript che si occuperà di scorrere la pagina fino a raggiungere l’elemento di destinazione associato al link.

Il vantaggio di questa soluzione è che estende il normale comportamento di un’ancora (<a>): quindi anche senza JavaScript attivo al click si verrà portati nell’area indirizzata.

La sintassi JavaScript

La prima riga di codice definisce la variabile che contiene i parametri principali:

• a.smooth stabilisce a quali elementi verrà associata la funzione; in questo caso verranno coinvolti tutti i link con la classe smooth
• 100 è un valore espresso in px che va a compensare eventuali caratteristiche del sito come ad esempio un menu che si aggancia allo scroll; senza questo accorgimento si rischierebbe di avere una sovrapposizione del menu all’elemento di destinazione
• 750 è la durata dell’animazione di scorrimento in millisecondi

var smooth = [$('a.smooth'), 100, 750];


smooth[0].click(function() {

   $('html, body').animate({

      scrollTop: $('[id="' + $.attr(this, 'href').substr(1) + '"]').offset().top -smooth[1]

   }, smooth[2]);

   return false;

});

Questo script è basato su jQuery quindi deve essere inclusa questa libreria per un corretto funzionamento.

Gestione dell’HTML

Per quanto riguarda gli elementi in pagina è sufficiente definire un id all’elemento di destinazione e associare all’attributo href dell’ancora lo stesso valore preceduto dal #.

<a class="smooth" href="#goHere">Link</a>


<section id="goHere">

   <h1>Maecenas sed diam eget</h1>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</section>

Codice pronto all’uso

Per avere una buona base di partenza è possibile scaricare un template completo con HTML e JavaScript che integra al suo interno tutto il codice necessario al funzionamento di questo effetto.

In questo modo è più facilmente comprensibile e replicabile con un pieno accesso al codice sorgente.