[RÉGLÉ] Positionnement des ancres dans une page

[Tortue Genial 69]

Hello,

J'aurai besoin de vos lumières concernant les ancres dans une page.
Si on a une page assez longue et que tout en haut on insère un petit menu ou chaque lien pointe vers une ancre dans la page, on est renvoyé au bon paragraphe, ça c'est ok.
Par contre, on ne tombe pas toujours pile poil au niveau du titre..desfois c'est un peu en dessus ou en dessous.
Certains sites ont des menu sticky, qui restent donc visible malgré le scroll down et forcément j'imagine que cela doit avoir un impact.
J'ai quelques clients qui m'ont fait la remarque et je n'ai pas trouvé de moyen hyper propre pour solutionner le truc.
Les clients ont trouvé une parade : entre chaque paragraphe, ils insèrent des lignes vides pour gérer le décalage et que le clic sur le lien renvoie bien au niveau du titre.

Auriez-vous des idées, conseils, solutions ou astuces pour gérer ce phénomène un peu mieux?

Merci
Laurent

[woluweb]

voici m'sieur

/* NEW 2020 - see easier solution on
https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/
NB : pas encore supporté par 100% des browsers :
https://caniuse.com/#search=scroll-margin-top
*/
.anchor {
scroll-margin-top: 100px;
}

[Tortue Genial 69]

voici m'sieur

/* NEW 2020 - see easier solution on
https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/
NB : pas encore supporté par 100% des browsers :
https://caniuse.com/#search=scroll-margin-top
*/
.anchor {
scroll-margin-top: 100px;
}

touché bien vu

Merci du tuyau je vais tester sur un site pour voir

[guillenphoto]

woluweb

Bonjour,
je vous remercie beaucoup pour cette astuce css. Cela fait des années que j'utilise un menu sticky avec une table des matières.
J'avais toujours ce décalage qui apparaissait quand je cliquais sur un élément de la table des matières.
Tout fonctionne parfaitement maintenant. C'est vraiment génial.

Merci mille fois cette ligne css.
Bien à vous
Amar Guillen

[Tortue Genial 69]

merci woluweb