Dans ce court tutoriel, nous allons voir comment très simplement ajouter en bas d’une page un bouton qui permette de retourner tout en haut de cette dernière.

Ce bouton va apparaitre dès que l’utilisateur fait défiler la page vers le bas et disparaitra dès que la page sera revenue à sa position initiale.

Pour ce faire il va falloir utiliser deux technologies bien connues des développeurs, en l’occurrence CSS pour la mise en forme, cette partie n’est pas obligatoire mais permet de modifier l’affichage et le rendre visuellement attractif et jQuery un framework basé sur javascript, permettant de vérifier l’état de défilement, le retour en haut de page et l’affichage du bouton.

Ce tuto montre une manière de faire assez simple, mais plusieurs sont possibles et surtout des mécanismes plus complexes peuvent être utilisés si besoin.

Pré-requis

Avant toute chose et comme ce bout de code utilise jQuery, il est nécessaire d’avoir ce fameux sésame, vous pouvez le trouver ici, la version utilisée pour ce tuto est la 1.11.0, mais les deux méthodes nécessaires sont présentes dans toutes les librairies antérieures et sans doute postérieures.

Code Javascript

Cette partie va permettre :

• d’afficher le bouton (bien que ce dernier puisse éventuellement faire partie d’une page HTML)
• de vérifier l’état de défilement de la page
• de remonter en haut de page
• d’afficher ou non le bouton

La première partie du code (en bleu) va attendre le chargement de la page, puis ajouter le bouton et enfin attendre que l’utilisateur clique sur ce dernier pour remonter en haut de page.

La deuxième partie du code va attendre que le défilement se fasse, si on est tout en haut (top = 0), le bouton est caché, sinon il est affiché.

 
$(document).ready( function () {
    // Add return on top button
    $('body').append('<div id="returnOnTop" title="Retour en haut">&nbsp;</div>');
    
    // On button click, let's scroll up to top
    $('#returnOnTop').click( function() {
        $('html,body').animate({scrollTop: 0}, 'slow');
    });
});

$(window).scroll(function() {
    // If on top fade the bouton out, else fade it in
    if ( $(window).scrollTop() == 0 )
        $('#returnOnTop').fadeOut();
    else
        $('#returnOnTop').fadeIn();
});

Code CSS

Cette partie optionnelle va permettre de mettre en forme notre bouton.

La première déclaration défini l’état normal du bouton, j’ai utilisé une image, ajouté une opacité à 50% et mis le curseur de la souris en pointer afin que l’utilisateur clique naturellement dessus.

La deuxième partie ne fait que mettre l’opacité à 100% lors du survol du bouton, ce qui renforce l’information d’action possible à l’utilisateur.

 
/* Return on top */
#returnOnTop {
    background: url('../img/return_on_top.png') no-repeat;
    bottom: 1%;
    cursor: pointer;
    display: none;
    filter: alpha(opacity = 50); /* IE < 8 */
    height: 48px;
    opacity: 0.5;
    position: fixed;
    right: 1%;
    width: 48px;
}

#returnOnTop:hover {
    filter: alpha(opacity = 100); /* IE < 8 */
    opacity: 1;
}

Conclusion

Ce bout de code a été testé et validé sur les navigateurs les plus répandus, opéra, safari, chrome, firefox et I.E. (8 à 11).

Même si ce genre de code n’apporte pas une plus-value énorme à un site, elle a au moins l’intérêt d’améliorer l’expérience utilisateur ce qui est, nous sommes d’accord, le meilleur moyen que ces derniers aiment utiliser votre site, et y reviennent donc avec plaisir.

Sources du tuto

Le fichier complet des sources avec un exemple peut se télécharger ici.