Scroll to top – Retour en haut de page

C’est un incontournable désormais, cette fameuse fonctionnalité de “scroll to top” permettant aux internautes de remonter rapidement en haut de page. Voici quelques lignes de jQuery et de CSS faciles à comprendre et mettre en place.

 Html

Un simple lien est nécessaire pour nous permettre d’afficher le bouton de retour en haut de page. Il est obligatoire d’y mettre la classe “scrollup”, car elle va nous servir dans la fonction jQuery et CSS. Si vous souhaitez changer le nom de cette classe, pensez à le faire également dans les deux autres fichiers. Je vous conseille de m’insérer ce lien juste avant la fermeture de la balise <body>.

Pour le reste, j’ai pris le parti de faire un bouton avec une icône Font Awesome.

 

 CSS

Libre à vous d’appliquer le style de votre choix. Prenez note qu’il faut appliquer un “dysplay:none”, car par défaut nous ne voulons pas voir ce bouton au chargement de la page. Il est également important de mettre une “position:fixed” pour que le bouton reste au même endroit lorsqu’on scroll la page. Les propriétés bottom et right nous permettent d’afficher notre bouton où bon nous semble.

 

jQuery

J’ai créé ici une fonction “ScrollToTop” qui se charge d’enregistrer dans la variable “s” la hauteur de la barre de scroll de votre navigateur. Je vérifie alors avec la condition, si la hauteur de la barre de scroll est supérieure à 250 pixels. Si c’est le cas, j’affiche le bouton avec la classe “scrollup”. Sinon, je le cache.

Cette fonction est appelée à chaque fois que la page est scrollée. Ainsi, on vérifie à chaque scroll le positionnement de la barre de défilement, pour savoir si nous devons afficher ou cacher le bouton.

Au clic sur le bouton, nous remontons la page (représentée ici par “html, body”) grâce à la fonction “animate” de jQuery. Cette fonction basique de jQuery est composée de deux paramètres : la direction (scrollTop : 0 => scroll en haut de page à 0 pixel) et la vitesse (500 => 500 ms => 0.5s). Vous pouvez alors faire les réglages nécessaires pour remonter la page à l’endroit et à la vitesse de votre choix.

 

Une deuxième fonction est présente “StopAnimation” qui nous permet, comme son nom l’indique, d’arrêter l’animation. En effet, sans cette fonction, l’internaute va devoir attendre que la page soit revenue exactement à l’endroit indiqué (ici : scrollTop: 0). Grâce à cette fonction, si l’internaute effectue une quelconque action sur le site, l’animation de retour en haut de page s’arrête immédiatement.

Nous surveillons donc les actions suivantes :

  • scroll => si l’internaute scroll la page
  • mousedown => si l’internaute clique quelque part
  • DOMMouseScroll =>Si l’internaute scroll la page avec la molette de sa souris. Fonctionne sous Mozilla
  • mousewheel => Si l’internaute scroll la page avec la molette de sa souris. Fonctionne pour IE et Opera
  • keyup => Si l’internaute appuie sur une touche de son clavier

Libre à vous de faire évoluer cette liste pour configurer vous même votre fonction scroll to top.

 

Démonstration

 

Rémi on twitterRémi on linkedin
Rémi
Chargé de projets web de profession, je partage à travers ce blog mes expériences, recherches et découvertes dans la création de projet web.
  • flo

    sur mobile, un e fois qu’on clic sur le bouton, on ne peut plus redescendre…

  • Vincent Farines

    Merci pour ce tuto ! J’ai le même problème que flo : sur mobile, une fois que l’on clic sur le bouton, on ne peut plus redescendre. Comment régler ce problème?
    Merci !

  • PHILIPPE VINH

    bonjour.
    merci pour ce tuto.
    cependant j’ai fait comme vous le disiez mais la flèche vectorielle ne s’affiche pas.
    en effect je vois que le background de la flèche mais pas la flèche dedans.
    pous vez vous m’aider pour mettre une flèche vectorielle car je ne sais pas dans quel fichier la mettre.
    Merci
    Philippe Vinh un programmeur débutant