Retour en haut

Le retour en haut est un lien de fragment en position fixe qui apparaît après le défilement d’une hauteur de fenêtre sur une longue page. Il ramène au début du document sans créer un modèle de clavier distinct ni dupliquer la navigation.

Quand l’utiliser#

• Les longues pages où la lecture défile bien au-delà de l’en-tête
• Seulement après un seuil de défilement — les pages courtes ne l’affichent jamais
• Pas un substitut à la navigation; il complète le lien d’évitement, qui agit dans l’autre sens

Implémentation#

{{ partial "back-to-top.html" . }}

<a class="back-to-top" href="#top" data-back-to-top hidden>
  <span aria-hidden="true">↑</span>
  <span>Retour en haut</span>
</a>

const longPage = document.documentElement.scrollHeight > window.innerHeight * 2;
link.hidden = !(longPage && window.scrollY >= window.innerHeight);

layouts/_default/baseof.html place le fragment du début du document avant le lien d’évitement et le composant après le pied de page, ce qui en fait le dernier contrôle normal de la page. Le script ne change que sa visibilité; le suivi de #top conserve le comportement natif du navigateur. Les jetons component.back-to-top.* définissent la surface, la bordure, le retrait et l’espacement intérieur.

Accessibilité#

• Doit s’afficher comme un véritable élément <a> que les lecteurs d’écran annoncent comme un lien
• Doit être le dernier dans l’ordre de tabulation, pour ne jamais interrompre la séquence de lecture
• Doit pouvoir être activé au clavier, pas seulement au pointeur
• Évitez plus d’un par page — un lien, une destination
• La cible peut recevoir le focus par programmation, mais pas avec la touche Tab; la navigation de fragment donne donc aux technologies d’assistance une destination stable sans ajouter d’arrêt avant le lien d’évitement
• Le contrôle est masqué avec l’attribut natif hidden jusqu’à ce qu’il soit utile; il n’est pas exposé dans l’ordre de tabulation sur les pages courtes ou près du sommet