Scrolling di pagina con jQuery

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Per raggiungere un punto interno alla pagina che stiamo navigando siamo abituati ad utilizzare le ancore interne, ovvero dei link che puntano ad un'ancora interna della pagina, del tipo:

<a href="#ancora">Vai al punto interno della pagina</a>

quindi:

<a name="ancora"></a>

per contrassegnare il "punto di arrivo".

Questa soluzione, per nulla obsoleta, ha comunque due contro:

  1. aggiunge il cancelletto ed il nome dell'ancora alla URL (es: pagina.html#ancora);
  2. in un Internet che diventa sempre più "figo", è necessario aggiungere un piccolo tocco di classe, come lo slide scolling.

Vediamo quindi come dare questo tocco di classe, esaminando il sistema di creazione di scrolling di pagina con jQuery.

Operazione preliminare, la nostra pagina dev'essere dotata del richiamo alla libreria jQuery:

<script type="text/javascript" src="jquery.js"></script>

Creiamo adesso una funzione che sfrutti l'effetto animate, stabilendo con un primo parametro la posizione da raggiungere (espressa in pixel) e, con un secondo parametro, la velocità (espressa in millesimi di secondi):

<script type="text/javascript">
$(document).ready(function()
{
    function ScorriPagina(Posizione, Velocita)
    {
        $("html,body").animate({scrollTop: Posizione}, Velocita, function(){});
        return false;
    }
    $("#ancora").click(function()
    {
        ScorriPagina(1500, 500);
    });
});
</script>

Alla fine della funzione, individuiamo l'evento click sul link che genererà lo scorrimento, ossia:

<a href="javascript:void(0)" id="ancora">Scorri...</a>

Nel nostro esempio, lo scroll avverrà per 1500 pixel ad una velocità di mezzo secondo.

Il ritorno al "top" della pagina è semplicissimo:

ScorriPagina(0, 500);

Sarà sufficiente passare "zero" come parametro relativo alla posizione da raggiungere.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (104.981)

:: Breve guida a jQuery (94.806)

:: Le espressioni regolari in Javascript (84.238)

:: Gestione delle stringhe in Javascript (73.042)

:: Stampare una pagina col Dhtml (42.371)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (38.285)

:: Menu orizzontale dinamico in Dhtml (36.651)

:: Gli Array in Javascript (35.416)

:: Temporizzazioni Javascript (30.811)

:: Istruzion condizionali in Javascript: if e switch (28.205)

IN EVIDENZA
DOWNLOAD