jQuery scrollTop e scroll to div: un esempio pratico

Pubblicato il 31 Marzo 2016

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.

Autore: emawebdesign

Full Stack Developer, SEO Specialist, esperto della trasformazione digitale con oltre 20 anni di esperienza.

Pubblicato in: