UX & Coding
-50% su Hosting WordPress con Serverplan (codice promo NM50)

Smooth Scroll: l’effetto di scorrimento verticale fluido

"Un semplicissimo metodo senza plugin per rendere fluido lo scorrimento della pagina dopo aver cliccato su un link interno"

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.

Smooth Scroll

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.

Codice completo per ottenere l'effetto di Smooth Scroll


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

Unisciti alla community! Rimani aggiornato, scopri le migliori guide e ricevi risorse gratuite.



1 commento

  • Ho provato tanti plugin per lo smooth scroll ma questo è il più semplice efficace e pratico che abbia provato

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.