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.