Partagez un lien vers le milieu d’une page et l’en-tête collant, s’il existe, se trouve au-dessus de l’en-tête souhaité. Le navigateur défilait jusqu'au bord supérieur ; votre en-tête a été installé plus tard. Les deux moitiés du correctif sont du pur CSS.

/* breathe below sticky headers when anchors are hit */
[id] { scroll-margin-top: 6rem; }

/* same for hash-targeted elements, plus free feedback */
:target { scroll-margin-top: 6rem; }
h2:target {
  background: color-mix(in oklab, var(--brand) 12%, white);
  border-radius: 0.35rem;
}

Comment les deux moitiés diffèrent

  • scroll-margin-top crée un espacement là où les opérations de défilement vers l'ancre atterrissent, y compris les signets de liens et les sauts de focus pour former des erreurs.
  • La pseudo-classe :target correspond à l'élément adressé par le fragment d'URL, ce qui en fait votre point d'ancrage et reste visible pour la section recherchée par l'utilisateur.
  • Les deux fonctionnent lorsque JavaScript est désactivé, ce qui est la norme en matière de liens profonds sur chaque site statique.

Placez-le là où les liens entrent

  1. Détectez le décalage honnête : faites défiler jusqu'à une ancre dans un vrai navigateur et mesurez dans quelle mesure l'en-tête se chevauche ; utilisez ce nombre, pas une supposition ronde.
  2. Donnez à chaque titre un identifiant dans le balisage ; les identifiants de titre générés à partir de votre nombre de builds, mais les identifiants doivent exister pour que la marge compte.
  3. Ajoutez la surbrillance cible comme arrière-plan clair et non permanent qui ne combat pas le mode sombre.
  4. Vérifiez les deux comportements dans un navigateur avec navigation par hachage et dans l'aperçu avant impression, où la mise en évidence de la cible ne doit pas couler sur le papier.

Les liens profonds sont les artefacts les plus partagés que votre contenu produit, et la partie très intéressante de ce correctif est que vous n'avez écrit aucun script et que vous avez toujours l'impression qu'il en existe un.