HTML: Making a link lead to the anchor centered in the middle of the page

问题

I have a link to an anchor on my html page. When the link is clicked it causes the page to scroll to the anchor so that the anchor is at the very top of the visible part of the page. How can I make the page scroll so that the anchor will be in the middle of the page?

回答1:

I found a solution Anchor Links With A Fixed Header posted by Phillip, he is a web designer. Phillip added a new EMPTY span as the anchor position.

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

then put the following css code

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

Thanks, Phillip!

回答2:

html:

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

css:

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

worked fine for me

回答3:

There is no straight way of doing this in pure html\css. It is possible though using js, by getting the element's top location and setting the page's top position to that element's position minus half of the page's height.

回答4:

Place a <span class="anchor" id="X"> then style the anchor class like:

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

With -50vh the anchor will scroll in the middle of the screen.

回答5:

if you want without blank space do it like this:

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

but, you'll still have to regulate height from javascript

回答6:

Determine what part of your page you actually want at the top, and place the anchor there instead. You won't be able to change the way browsers interpret anchors - at least not without upsetting your users.

回答7:

Extending off of charles.cc.hsu's answer, we can do this for elements of arbitrary height using the vh CSS unit, which is relative to the viewport's height.

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 is supported in in IE9 and up, so it's pretty safe to use.

回答8:

Since "middle of the page" is relative to the size of the user's screen and window at any given time, you are going to have to use Javascript to achieve this, as there is no way in pure HTML/CSS to get the vertical screen width.

回答9:

I'd try putting a negative margin (or other positioning method) equal to half the page height on the target anchor tag.

回答10:

Firefox supports setting a padding-top property on the named anchor. From there, you could set a cookie via javascript that contains the browser's dimensions, and adjust your padding-top accordingly server-side. To the end user, it would look like its pure html/css, but noam is correct in that a wee bit of JS is needed to get the browser's dimensions, since it doesn't give you this information without a little coercion.

来源：https://stackoverflow.com/questions/1418838/html-making-a-link-lead-to-the-anchor-centered-in-the-middle-of-the-page

标签

html

anchor

center