Maison >interface Web >js tutoriel >Comment puis-je décaler les ancres HTML pour tenir compte des en-têtes fixes ?

Comment puis-je décaler les ancres HTML pour tenir compte des en-têtes fixes ?

DDD
DDDoriginal
2024-12-15 22:46:17642parcourir

How Can I Offset HTML Anchors to Account for Fixed Headers?

Décalage de l'ancre HTML pour l'en-tête fixe

Lorsque vous travaillez avec des en-têtes fixes, le positionnement des ancres HTML peut devenir problématique. Comme l'en-tête reste en haut de la page, un lien vers une ancre dans la page fait sauter la page, masquant le contenu derrière l'en-tête. Pour résoudre ce problème, un décalage peut être appliqué à l'ancre.

Solution CSS :

Utilisez CSS pour ajuster la position de l'ancre sans utiliser JavaScript. Attribuez une classe à l'ancre :

<a class="anchor">

Cette ancre peut ensuite être décalée par rapport à son emplacement réel sur la page en la positionnant comme un élément de bloc et en lui appliquant une position : relative; style :

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

La valeur de "top" (-250px dans cet exemple) représente le montant du décalage. Cela déplacera l'ancre de 250 pixels vers le haut par rapport à sa position d'origine. L'attribut "visibilité : caché" empêche l'ancre d'être visible mais lui permet de toujours répondre aux clics.

Notez que la valeur exacte du décalage peut varier en fonction de la hauteur de votre en-tête. Ajustez-le en conséquence pour garantir que l'ancre défile jusqu'à la bonne position sur la page.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn