Objectif
Créer un bouton qui apparaît lorsqu’on descend dans la page, et qui permet de revenir au sommet de celle-ci.
Le retour n’est pas instantané, il s’opère en un mouvement fluide.
Le bouton
$('<a href="#" class="scrollToTop"></a>').appendTo('body');
Le code
//On regarde si l'écran est en haut de la page. Si ce n'est pas le cas :
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
// L'event au click du bouton
$('.scrollToTop').click(function () {
$('html , body').animate({scrollTop: 0}, 800);
return false;
});