Si j'ai un en-tête non défilant dans une page HTML fixé en haut, avec une hauteur définie :
Existe-t-il un moyen d'utiliser des ancres d'URL (partie #fragment) pour faire défiler le navigateur jusqu'à une position spécifique dans la page tout en respectant la hauteur de l'élément fixe sans utiliser JavaScript ?
http://example.com/#bar ≪/pré>Erreur (mais comportement courant) : Correct : +------------------------+ +------------- - -------------------+ | BARRE////////////////////// en-tête |//////////////////// /// en-tête | +------------------------+ +------------- ---- -------------------+ | reste du texte ici | | | ... | reste du texte ici | | +---------------------------------+ +-------------- -------------------+ ≪/pré>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Si vous ne pouvez pas ou ne voulez pas définir une nouvelle classe, vous pouvez créer une pseudo-classe en CSS pour
::before伪元素添加一个固定高度的:target::target::before { content: ""; display: block; height: 60px; /* 固定的标题高度 */ margin: -60px 0 0; /* 负的固定标题高度 */ }Ou utilisez jQuery pour faire défiler la page par rapport à
:target:var offset = $(':target').offset(); var scrollto = offset.top - 60; // 减去固定的标题高度 $('html, body').animate({scrollTop:scrollto}, 0);J'ai rencontré le même problème. J'ai résolu ce problème en ajoutant une classe à l'élément d'ancrage et en utilisant la hauteur de la barre supérieure comme valeur de padding-top.
J'ai utilisé le CSS suivant :
.anchor { padding-top: 90px; }