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 smooth100
è 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 destinazione750
è 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.
Ho provato tanti plugin per lo smooth scroll ma questo è il più semplice efficace e pratico che abbia provato