[CSS]Lien retour haut de la page

NoSmoking

Objectif

Faire apparaître un lien « retour haut de page » au scroll de la page et le fixer à une certaine position, le tout en CSS uniquement.

Nous allons mettre en œuvre pour cela le « positionnement adhérent » (sticky en anglais) sur ce lien.

Structure HTML de base

<body>
  <header></header>
  <main>
    <!-- le contenu de la page -->
  </main>
  <footer></footer>
  <!-- le lien retour haut de page -->
  <nav class="gotoTop">
    <a href="#">&#9650;</a>
  </nav>
</body>

L'élément <nav> servant de conteneur au lien « retour » doit être enfant direct de l'élément <body>.

En mettant cet élément en fin de document on a la garantie que celui-ci sera au dessus des autres éléments de la page et on n'aurait donc pas besoin de lui affecter une propriété z-index.

Application du CSS

La première chose à faire est de rendre l'élément <body> référent en le positionnant, c'est du classique.

body {
  position: relative;
}

Il faut maintenant positionner le conteneur <nav> du lien et le dimensionner pour que celui-ci occupe la totalité de la hauteur du <body>.

.gotoTop {
  z-index: 9999;        /* [facultatif] au dessus du reste */
  position: absolute;
  top: 0;
  right: 1em;           /* décalage à droite */
  bottom: 0;            /* occupe toute la hauteur du référent */
  pointer-events: none; /* ne prend pas l'événement du pointer */
}

Vous pouvez toujours lui affecter une couleur de fond pour mieux visualiser sa position.

Il ne nous reste plus qu'à nous occuper du lien proprement dit. 

.gotoTop a {
  display: block;       /* pour prise en compte sticky */
  position: sticky;     /* positionnement « adhérent » */
  top: 40vh;            /* position d'affichage fixe */
  margin-top: 100vh;    /* pour masquer verticalement au départ */
  font-size: 3em;       /* pour bien le voir */
  pointer-events: auto; /* reprend l'événement du pointer */
}

C'est déjà fini, rien de bien compliqué en fait, il ne vous reste plus qu'à personnaliser le lien.

Chapitre de scroll ...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.

Inconvénients

IE ne reconnait pas le positionnement sticky, dommage pour ses utilisateurs !

Aucun effet de transition ne peut-être appliqué car on ne note pas de changement d'état.

Conclusion

Rien de bien compliqué pour mettre en œuvre cette solution en CSS, sans passer par du JavaScript et un contrôle sur le scroll de la page.

Néanmoins il faut bien être honnête, la gestion en JavaScript d'un tel lien est des plus simple et permet, en plus, de gérer des effets de transition juste en modifiant la classe du lien, ce qui n'est pas le cas en CSS pur.

Je vous livre ci-dessous une version JavaScript (IE except, because arrow function).

document.addEventListener("DOMContentLoaded", () => {
  const oLien = document.querySelector("nav.gotoTop a");
  if (oLien) {
    window.addEventListener("scroll", () => {
      // limite pour apparition du lien
      const minScroll = window.innerHeight;
      // choix action sur la classe CSS du lien
      const action = (window.pageYOffset > minScroll) ? "add" : "remove";
      oLien.classList[action]("visible");
    });
  }
});

Vous aurez peut-être noté que le lien change de couleur suivant la position du scroll de la page, ceci est géré grâce à la fonction ci-dessus, mais c'est juste pour le « fun ».

A vous de faire votre choix entre les versions CSS et JavaScript (« vanilla » bien sûr) sachant que cela ne reste quand même que du gadget et que vous pouvez même utiliser les deux.

Ressources