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.
Il Codice JavaScript
La prima riga di codice definisce la variabile che contiene i parametri principali:
a.smoothstabilisce 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 questa compensazione 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;
});
Il codice 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>
