HTML: faire un lien menant à l'ancre centrée au milieu de la page

j'ai trouvé une solution Liens D'Ancrage Avec Un En-Tête Fixe publié par Phillip, il est concepteur web. Phillip a ajouté une nouvelle portée vide comme position d'ancrage.

<span class="anchor" id="section1"></span>
<div class="section"></div>

puis mettez le code css suivant

.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}

Merci, Phillip!

html:

<a id="anchor">NEWS</a>

css:

#anchor{
position: relative;
padding-top: 100px; //(whatever distance from the top of the page you want)
}

a bien fonctionné pour moi

si vous le souhaitez, sans espace vide de faire comme ceci:

<h2 id="jump_tag" style="padding-top: 500pt; margin-top: -500pt;"></h2>

mais, vous aurez encore à régler la hauteur de javascript

Ma solution est:<span class="anchor" id="X"> ensuite, style la classe "anchor" comme:

.anchor {
position:absolute;
transform:translateY(-50vh);
}

grâce au" - 50vh " l'ancre va défiler au milieu de l'écran.

case https://www.w3schools.com/cssref/css_units.asp pour plus d'info.

déterminez quelle partie de votre page vous voulez réellement en haut, et placez l'ancre là à la place. Vous ne serez pas en mesure de changer la façon dont les navigateurs n'interprètent ancres - du moins pas sans bouleverser vos utilisateurs.

étant donné que" middle of the page " est relatif à la taille de l'écran et de la fenêtre de l'utilisateur à tout moment, vous allez devoir utiliser Javascript pour ce faire, car il n'y a aucun moyen dans pur HTML/CSS pour obtenir la largeur d'écran verticale.

j'essaierais de mettre une marge négative (ou une autre méthode de positionnement) égale à la moitié de la hauteur de la page sur la balise d'ancrage cible.

Firefox soutient la mise en place d'une propriété de rembourrage-dessus sur l'ancre nommée. De là, vous pouvez configurer un cookie par javascript qui contient les dimensions du navigateur, et ajuster votre rembourrage en conséquence côté serveur. Pour l'utilisateur final, il ressemblerait à son html pur/css, mais noam a raison en ce qu'un petit peu de JS est nécessaire pour obtenir les dimensions du navigateur, car il ne vous donne pas cette information sans un peu de coercition.

s'Étendant hors de charles.cc.hsu réponse, nous pouvons le faire pour les éléments de hauteur arbitraire en utilisant le vh unité CSS, qui est relative à la hauteur du viewport.

HTML:

<span class="anchor" id="section1"></span>
<div class="section"></div>

CSS:

.anchor{
    display: block;
    height: 50vh; /* 50% viewport height */
    margin-top: -50vh;
    visibility: hidden;
}

vh est pris en charge dans IE9 et up, donc c'est assez sûr à utiliser.