HTML：使链接指向页面中间居中的锚点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1418838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML: Making a link lead to the anchor centered in the middle of the page
提问by olamundo
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?
我的 html 页面上有一个锚点的链接。单击链接时，它会导致页面滚动到锚点，从而使锚点位于页面可见部分的最顶部。如何使页面滚动以便锚点位于页面中间？
采纳答案by olamundo
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.
在纯 html\css 中没有直接的方法可以做到这一点。虽然使用 js 是可能的，通过获取元素的顶部位置并将页面的顶部位置设置为该元素的位置减去页面高度的一半。
回答by charles.cc.hsu
I found a solution Anchor Links With A Fixed Headerposted by Phillip, he is a web designer. Phillip added a new EMPTY span as the anchor position.
我找到了一个解决方案Anchor Links With A Fixed Header由 Phillip 发布，他是一名网页设计师。Phillip 添加了一个新的 EMPTY 跨度作为锚点位置。
<span class="anchor" id="section1"></span>
<div class="section"></div>
then put the following css code
然后把下面的css代码
.anchor{
display: block;
height: 115px; /*same height as header*/
margin-top: -115px; /*same height as header*/
visibility: hidden;
}
Thanks, Phillip!
谢谢，菲利普！
回答by jakub
html:
html：
<a id="anchor">NEWS</a>
css:
css：
#anchor{
position: relative;
padding-top: 100px; //(whatever distance from the top of the page you want)
}
worked fine for me
对我来说很好用
回答by Gianluca Pietrobon
回答by Sly_TheKing
if you want without blank space do it like this:
如果你想要没有空格，请这样做：
<h2 id="jump_tag" style="padding-top: 500pt; margin-top: -500pt;"></h2>
<h2 id="jump_tag" style="padding-top: 500pt; margin-top: -500pt;"></h2>
but, you'll still have to regulate height from javascript
但是，您仍然需要从 javascript 中调节高度
回答by Jake Tunaley
Extending off of charles.cc.hsu's answer, we can do this for elements of arbitrary height using the vhCSS unit, which is relative to the viewport's height.
扩展charles.cc.hsu 的答案，我们可以使用vh相对于视口高度的CSS 单元对任意高度的元素执行此操作。
HTML:
HTML：
<span class="anchor" id="section1"></span>
<div class="section"></div>
CSS:
CSS：
.anchor{
display: block;
height: 50vh; /* 50% viewport height */
margin-top: -50vh;
visibility: hidden;
}
vhis supported in in IE9 and up, so it's pretty safe to use.
vh在 IE9 及更高版本中受支持，因此使用起来非常安全。
回答by Tomas Aschan
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.
确定您真正想要在页面顶部的哪个部分，并将锚点放在那里。您将无法更改浏览器解释锚点的方式 - 至少不会在不惹恼您的用户的情况下。
回答by Triptych
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.
由于“页面中间”在任何给定时间都与用户屏幕和窗口的大小有关，因此您将不得不使用 Javascript 来实现这一点，因为在纯 HTML/CSS 中无法获得垂直屏幕宽度。
回答by Triptych
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.
Firefox 支持在命名锚点上设置 padding-top 属性。从那里，您可以通过包含浏览器尺寸的 javascript 设置 cookie，并相应地在服务器端调整您的 padding-top。对于最终用户来说，它看起来像是纯 html/css，但 noam 是正确的，因为需要一点点 JS 来获取浏览器的尺寸，因为它不会在没有一点强制的情况下为您提供此信息。
回答by edeverett
I'd try putting a negative margin (or other positioning method) equal to half the page height on the target anchor tag.
我会尝试在目标锚标记上放置一个等于页面高度一半的负边距（或其他定位方法）。
