I link 'Torna su' hanno la caratteristica di essere troppo veloci e poco elastici nel loro movimento, portando ad uno scrolling istantaneo della pagina verso l'ancora di destinazione. Oltre a ciò, hanno anche lo svantaggio di aggiungere l'ancora (hash) stessa all'URL della pagina. Vediamo come risolvere questo problema con jQuery.
Partiamo da questa struttura HTML:
<body id="top">
<!-- contenuti -->
<p><a class="top" href="#top">Torna su</a></p>
</body>
Con jQuery dobbiamo ottenere l'offset superiore dell'elemento a cui punta l'ancora e operare sulla proprietà scrollTop degli elementi html e body:
$(document).ready(function() {
$('a.top', document.body).click(function(event) {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top + 'px'
}, {
duration: 500,
easing: 'swing'
});
event.preventDefault();
});
});
Abbiamo scelto l'easing di tipo swing per ottenere la maggiore fluidità di movimento possibile. Potete visionare l'esempio finale in questa pagina.