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

j'ai un lien vers une ancre sur ma page html. Lorsque le lien est cliqué, Cela fait défiler la page vers l'ancre de sorte que l'ancre est au sommet de la partie visible de la page. Comment puis-je faire défiler la page pour que l'ancre soit au milieu de la page?

17
demandé sur olamundo 2009-09-14 01:09:19

10 réponses

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!

10
répondu charles.cc.hsu 2017-02-27 11:28:57

il n'y a pas de façon directe de faire cela dans html\css pur. Il est possible en utilisant js, en obtenant l'emplacement supérieur de l'élément et en plaçant la position supérieure de la page à la position de cet élément moins la moitié de la hauteur de la page.

8
répondu olamundo 2009-10-02 15:53:21

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

7
répondu jakub 2013-12-06 07:08:43

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

3
répondu Sly_TheKing 2016-07-25 09:52:11

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.

3
répondu Gianluca Pietrobon 2017-12-27 15:54:30

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.

2
répondu Tomas Lycken 2009-09-13 21:25:15

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

1
répondu Triptych 2009-10-02 15:55:50

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.

0
répondu edeverett 2009-09-13 21:32:32

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.

0
répondu 2009-10-08 13:18:18

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.

0
répondu Jake Tunaley 2018-08-16 05:43:09