Lo scrolling della pagina cliccando sui link interni alla stessa è un effetto di sicuro impatto per il navigatore, c’è addirittura chi lo ha utilizzato per creare dei siti di un’unica pagina. Vediamo quindi una delle tante soluzioni per realizzarlo, il risultato finale che otterremo sarà questo: demo scrolling

Per impostare lo scrolling sui link all’interno di una pagina per prima cosa va inserito il link al framework che vogliamo utilizzare, in questo caso jQuery.

Accediamo al sito di jQuery e scarichiamo l’ultima versione, in questo momento la 1.4.2. Salviamola in un file e inseriamolo nella cartella del nostro sito contenente i files Javascript, ad esempio la cartella js.

Ora rendiamo operativo jQuery inserendolo nell’head della pagina:

Il nostro sistema in questo momento è pronto per utilizzare il framework di jQuery, colleghiamogli quindi il codice che fa effettivamente quanto ci siamo prefissi, ovvero lo scrolling della pagina.

Sarebbe buona norma inserire il codice in un file a parte e posizionarlo nella cartella dei codici js, ma essendo un esempio mi sono concesso la licenza di inserirlo nella pagina stessa, ovviamente sempre nell’head della pagina.

$(function(){

    $('a[href*=#]').click(function() {

    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {

            var $target = $(this.hash);

            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

            if ($target.length) {

                var targetOffset = $target.offset().top;

                $('html,body').animate({scrollTop: targetOffset}, 1000);

                return false;

            }

        }

    });

});

A questo punto non ci resta che creare i link interni con le ancore, ottenendo il risultato finale: demo scrolling.

In base a come è scritta la funzione, tutti i link verso le ancore (#) all’interno della pagina attiveranno la funzione. L’unico accorgimento è quello di non modificare l’id=”top” dell’ancora in alto.

Potrete quindi settare a vostro piacimento la velocità dello scrolling; nella pagina di esempio è settato a 1000 millisecondi, ovvero 1 secondo.

La guida è stata liberamente tratta e tradotta dal sito CSS-Tricks.

Tags: jQuery, scrolling pagina, Web Design