jQueryDans 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.

  1. Bonjour,

    Je tenté en suivant ton tutoriel et en utilisant le dossier de mettre ne place la bouton. Or il n’apparait seulement lorsque je zoome dans la page, aussi je ne sais pas comment régler pour que le retour se passe plus haut dans la page.

    J’aurai bien besoin d’aide, d’avance merci
    Adrien

    • Bonjour,

      C’est très étonnant que le bouton n’apparaisse pas sur votre navigateur car il est placé en fixed à 1% du bas et de la droite, donc en fonction de la zone d’affichage.

      Auriez vous une URL que je jette un coup d’oeil rapide ?

      Bon après midi

  2. Bonsoir,

    J’ai juste une question… Les deux codes doivent être collés à quel endroits ?

    Le premier, je suppose que c’est au-dessus de (d’ailleurs quand j’enregistre il ne fonctionne pas, ils me mette que « nbsp » n’est pas reconnu ou quelque chose comme ça) ? Et le deuxième, au même endroit ou à un autre ?

    Merci d’avance,

    • Bonjour,

      • Le premier code est du javascript, donc soit vous le placez dans un fichier JS utilisé sur tout votre site, ou bien vous le placez dans le header ou le footer entouré de la balise script
      • Le deuxième est du CSS, donc soit dans un fichier CSS utilisé sur tout votre site, soit dans le header entouré de la balise style

      Attention à vous assurer que la librairie jquery est chargée sur votre page.

      N’hésitez pas à poster quelque soit l’issue.

      Bonne journée.

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

51 − 50 =