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.

JavaScript: recuperare titolo e dominio della pagina web

Tutorial: realizzare una classe per creare, leggere e scrivere un file con PHP

Ecco come conoscere l'user-agent di un crawler o di un qualsiasi browser

Condividi il post con i tuoi amici o colleghi