Lien de retour en haut

Lorsque la page est longue, une bonne pratique consiste à proposer un lien de retour en haut de page. Celui-ci apparaîtra au défilement de la page.

Règles d’implémentation pour l’accessibilité

  • Le “bouton” de retour en haut est en fait un lien travaillé en CSS.
  • Il se présente sous forme d’une icône “flèche” qui sera cachée aux logiciels de synthèse vocale via l’attribut aria-hidden="true".
  • Le lien comportera un texte compréhensible du type “Retour en haut de page” qui ne sera visible que par les logiciels de synthèse vocale via un style CSS.

Visuel

Descendez dans la page et vous verrez apparaître un “bouton” avec un flèche vers le haut qui, au clic dessus, vous ramène en haut de page.

Extraits de code

Code HTML

<a id="RetourEnHaut" class="cInvisible" href="#top">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false" role="presentation" >
<path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z" />
</svg>
<span class="sr-only">Retour en haut de la page</span>
</a>

Code CSS

:root {
    --TEXTE-color: #ffffff;
    --FOND-color: #666666;
    --FOND-HOVER-color: #333333;
    --BORDURE-color: #ffffff;
}
a#RetourEnHaut {
  border-radius: 50%;
  padding: 0 0.5em;
  font-size: 1.5em;
  text-align: center;
  color: var(--TEXTE-color);
  background: var(--FOND-color);
  border: 3px solid var(--BORDURE-color);
  position: fixed;
  right: 1.5em;
  opacity: 1;
  z-index: 99999;
  transition: all ease-in 0.2s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-decoration: none;
}

a#RetourEnHaut:hover {
  padding: 0.25em 0.75em;
  right: 1.25em;
  background: var(--FOND-HOVER-color);
  transition: all ease-in 0.2s;
  outline: 3px solid var(--TEXTE-color);
}

a#RetourEnHaut.cInvisible {
  bottom: -35px;
  opacity: 0;
  transition: all ease-in 0.5s;
}

a#RetourEnHaut.cVisible {
  bottom: 50px;
  opacity: 1;
}

Code javascript

/********************************************************************
 * Fonction faire apparaître/disparaître le bouton de retour en haut de page
 ********************************************************************/
document.addEventListener("DOMContentLoaded", function () {
  window.onscroll = () => {
    document.getElementById("RetourEnHaut").className =
      window.scrollY > 100 ? "cVisible" : "cInvisible";
    var current = "";
  };
});