jquery

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.

NO SPAM. Non fornirò la tua email a terzi e riceverai solo contenuti che ti interessano sugli argomenti che tratto e potrai cancellarti quando vuoi con un link che trovi in tutte le email.