Solution au problème du chevauchement du titre de la page et de l'ancre de la page

Question

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é>

Answer 1

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);

Answer 2

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.

<h1><a class="anchor" name="barlink">Bar</a></h1>

J'ai utilisé le CSS suivant :

.anchor { padding-top: 90px; }