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? 🙂