jQuery: creare una pagina scrollabile

Creare l'effetto di una pagina che scrolla per rivelare le varie porzioni del contenuto in essa presente è un tipo di effetto che in jQuery si ottiene con poche righe di codice. Al contrario, la preparazione della pagina richiede degli stili CSS particolari. Vediamo insieme i dettagli di questa tecnica.

Abbiamo una pagina così strutturata:

<body>
<ul id="nav">
    <li><a href="#section-1">1</a></li>
    <li><a href="#section-2">2</a></li>
    <li><a href="#section-3">3</a></li>
</ul>
<div id="section-1">...</div>
<div id="section-2">...</div>
<div id="section-3">...</div>
</body>

Abbiamo un menu di navigazione che contiene tre ancore che puntano alle rispettive sezioni della pagina. Con i CSS dobbiamo posizionare il menu in modo fisso e centrato in verticale. Inoltre ciascuna sezione dovrà avere uno spazio superiore sufficiente a farla scomparire inizialmente dall'area visualizzata dall'utente, lasciando il solo menu:

body {
    width: 70%;
    margin: 2em auto;
    font: 90% Arial, sans-serif;
    position: relative;
    height: 100%;
    min-height: 100%;
}

#nav {
    position: fixed;
    top: 50%;
    left: 0;
    width: 4em;
    height: 13.5em;
    margin-top: -6.5em;
}

#nav li {
    display: block;
    width: 4em;
    height: 4em;
    margin-bottom: 0.5em;
}

#nav a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 4;
    text-align: center;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
}

#nav a:hover { background: #333; }

div {
    margin-top: 40em;
    line-height: 1.4;
    padding: 1em;
    background: #eee;
    position: relative;
}

div p {
    margin-bottom: 0.5em;
    letter-spacing: 0.1em;
    text-align: justify;
}

div h2 {
    width: 4em;
    height: 4em;
    background: #333;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 4;
    position: absolute;
    top: 1em;
    left: -4.5em;
}
​

A questo punto con jQuery dobbiamo utilizzare la proprietà scrollTop degli elementi html e body impostandola di volta in volta sull'offset superiore della sezione a cui fa riferimento ciascun ancora dei link di navigazione:

$('a', '#nav').click(function(event) {
    event.preventDefault();
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top
    }, 800, 'linear');


});​

Potete visionare l'esempio finale in questa pagina.