Jquery: link al top pagina a scomparsa

L'altezza di visualizzazione di una pagina web è una variabile dipendente dalla risoluzione dello schermo dell'utente, pertanto non è sempre possibile determinare se sia necessario inserire il classico link 'torna al top page'.

Con Jquery possiamo intervenire, applicando oltretutto un effetto fade al div che contiene il link top, div che apparirà solo quando la barra di scorrimento verticale sarà a una distanza diversa da zero!

Caricata l'ultima versione di Jquery, (qui l'articolo sul come fare), il nostro script sarà questo:

$(document).ready(function(){

// nascondiamo il div di link al top
$(".toTop").hide();

// fade in div di link al top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 0) {
$('.toTop').fadeIn();
} else {
$('.toTop').fadeOut();
}
});

// scroll del body a 0px al click
$('.toTop a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});

Assegnamo al tag body l'id top, e posizioniamo dove serve il div

<div class="toTop"><a href="#top">top pagina</a></div>