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;
    });