Comment décaler les liens d'ancrage depuis le haut de la fenêtre ?

Lien d'ancrage avec décalage depuis le haut

Lors de la navigation dans une page Web via des liens d'ancrage, la section cible atterrit souvent directement en haut de la fenêtre . Pour donner un peu de répit, il est souhaitable de décaler légèrement la zone liée par rapport au bord de la page.

Solution

La propriété scroll-margin-top offre une solution simple. En ajoutant une valeur à cette propriété pour l'ancre, vous pouvez créer un espace entre sa position liée et le bord supérieur de la page. Par exemple :

<code class="css">#anchor {
  scroll-margin-top: 100px;
}</code>

Ce code déplacerait la section cible de 100 pixels vers le bas lors de la navigation via le lien d'ancrage.

Compatibilité

Heureusement, cette solution est largement prise en charge par les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Sa compatibilité avec les navigateurs plus anciens comme Internet Explorer est cependant limitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!