Press "Enter" to skip to content

jQuery scrollTop e scroll to div: un esempio pratico

In questo articolo vediamo come implementare lo scroll verso un elemento della pagina web (scroll to div) e lo scroll al top tramite jQuery. Ci può tornare utile per implementare un menu di navigazione con effetto “smooth scroll“, particolarmente adeguato per una landing page o single-page application.

Se, per esempio, il nostro link al top avesse id uguale a “btnHome”, il codice jQuery sarebbe:

$("#btnHome").click(function(event) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: 0
    }, 1000);
});

Un link “btnContact” che punta alla sezione contatti, invece, sarebbe:

$("#btnContact").click(function(event) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $("#contacts").offset().top
    }, 1000);
});

Per l’animazione abbiamo utilizzato il metodo animate di jQuery.

Condividi l'articolo con i tuoi amici

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.