Comment puis-je ajouter un décalage vertical aux liens d'ancrage ?

Déplacement des liens d'ancrage avec décalage vertical

Lors de l'utilisation de liens d'ancrage dans une page Web, par défaut, lorsque vous cliquez sur un lien d'ancrage, cela vous amène vers une section spécifique où la zone liée est positionnée tout en haut de l’écran. Ce comportement n'est pas toujours souhaitable, surtout si vous souhaitez conserver un peu d'espace en haut avant d'atteindre la section liée ou ciblée.

Pour obtenir ce comportement souhaité, la propriété scroll-margin-top peut être utilisée . En appliquant une valeur de pixel spécifique à cette propriété, vous pouvez créer un décalage vertical.

Code :

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

Dans cet exemple, "#anchor" représente le l'ID de l'élément attribué au contenu lié, et "100px" indique l'espace vertical souhaité. En définissant cette propriété, vous vous assurez que lorsque vous cliquez sur le lien d'ancrage, le navigateur défilera jusqu'au contenu lié mais laissera 100 pixels d'espace en haut. Cela offre une expérience de défilement plus contrôlée et conviviale.

Cette approche fonctionne sur différents navigateurs, y compris les dernières versions, ce qui en fait une solution fiable pour contrôler le comportement des liens d'ancrage sur les pages Web modernes.

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!