Uno Smooth Scroll in JQuery

Oggi vi lascio uno snippet per implementare uno smooth scroll verticale sulle vostre pagine web. L’idea di base è far scorrere la pagina fino ad un determinato punto una volta cliccato su un pulsante, utile ad esempio se abbiamo una copertina che occupa il 100% dello schermo e vogliamo far scorrere la pagina all’utente semplicemente cliccando su una freccia o un link qualsiasi.

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag <script></script> e la sua dichiarazione deve essere successiva a quella della libreria JQuery.
Innanzi tutto lo script viene incluso in document.ready() in modo che tutti gli elementi del DOM siano correttamente disegnati.

Andiamo a triggerare l’evento click sull’anchor che vogliamo utilizzare $(‘anchor‘).click(). All’interno dell’evento click appena scritto inseriamo la funzione di callback che eseguirà l’animazione vera e propria ( mediante animate() di JQuery ).  Nello snippet poi abbiamo indicato un ipotetico elemento con id #target-anchor per indicare alla funzione fin dove far scorrere la pagina  ($(“#target-anchor”).offset().top).  Infine, il valore 800 rappresenta la durata dell’animazione ( in millisecondi), per cui sentitevi liberi di impostare quella che più si adatta alle vostre esigenze

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* Developer Corsaro.it - JQuery Smooth Scroll
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/


$(document).ready(function() {
$('anchor').click(function(event){
$('html, body').animate({
scrollTop: $("#target-anchor").offset().top
}, 800);
event.preventDefault();
});
});

Utilizzi

Come ho detto in precedenza questo Snippet può essere utlizzato in un sacco di tipologie diverse di progetto, ad esempio possiamo includerlo nel footer del tema WordPress attivo.
Domande?  🙂

 

 

Lo hai trovato utile? Codividilo con i tuoi follower :)