C’est un problème familier : quand on utilise des ancres dans les pages et qu’on a un menu (header) fixe, l’ancre peut être caché sous le menu quand on clic dessus.

Il y a une nouvelle propriété CSS qui permet de dire au navigateur que la zone de scroll doit recevoir une marge intérieure, égale à la hauteur du menu fixe par exemple :

body {
  scroll-padding-top: 70px; /* height of sticky header */
}

Ça ne marche que dans Chrome pour l’instant.

Pour les autres navigateurs, j’avais mis au point ceci : https://codepen.io/lehollandaisvolant/pen/JOOQeq (à l’aide d’un ::before et d’une marge négative).

— (permalink)