blocks|key|1239546|text|在纯html\css中没有直接的方法可以做到这一点。通过使用js，可以获取元素的顶部位置，并将页面的顶部位置设置为该元素的位置减去页面高度的一半。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1239547|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1454666|text|我找到了Phillip发布的一个解决方案Anchor+Links+With+A+Fixed+Header，他是一名网页设计师。Phillip添加了一个新的空跨度作为锚点位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1454667|<span+class="anchor"+id="section1">
<div+class="section"></div>|code-block|syntax|javascript|1454668|然后将以下css代码放入|1454669|.anchor{
++display:+block;
++height:+115px;+/*same+height+as+header*/
++margin-top:+-115px;+/*same+height+as+header*/
++visibility:+hidden;
}|1454670|谢谢，菲利普！|1454671|entityMap|0|LINK|mutability|MUTABLE|url|http://pixelflips.com/blog/anchor-links-with-a-fixed-header^0|K|W|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

I found a solution <a href="http://pixelflips.com/blog/anchor-links-with-a-fixed-header" rel="noreferrer">Anchor Links With A Fixed Header</a> posted by Phillip, he is a web designer. Phillip added a new EMPTY span as the anchor position.

<pre><code>&lt;span class="anchor" id="section1"&gt;&lt;/span&gt;
&lt;div class="section"&gt;&lt;/div&gt;
</code></pre>

then put the following css code

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

Thanks, Phillip!

blocks|key|1239800|text|放置<span+class="anchor"+id="X">，然后设置anchor类的样式，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1239801|.anchor+{
++position:+absolute;
++transform:+translateY(-50vh);
}|code-block|syntax|javascript|1239802|使用-50vh，锚点将在屏幕中央滚动。|1239803|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/cssref/css_units.asp^0|2|S|Z|6|0|0|2|5|2|5|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Place a <code>&lt;span class="anchor" id="X"&gt;</code> then style the <code>anchor</code> class like: 

<pre><code>.anchor {
 position: absolute;
 transform: translateY(-50vh);
}
</code></pre>

With <a href="https://www.w3schools.com/cssref/css_units.asp" rel="noreferrer"><code>-50vh</code></a> the anchor will scroll in the middle of the screen.

blocks|key|1454602|text|html：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1454603|<a+id="anchor">NEWS</a>|code-block|syntax|javascript|1454604|css：|1454605|#anchor{
position:+relative;
padding-top:+100px;+//(whatever+distance+from+the+top+of+the+page+you+want)
}|1454606|对我来说效果很好|1454607|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

html:

<pre><code>&lt;a id="anchor"&gt;NEWS&lt;/a&gt;
</code></pre>

css:

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

worked fine for me

blocks|key|1239737|text|如果你想不留空格，可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1239738|<h2+id="jump_tag"+style="padding-top:+500pt;+margin-top:+-500pt;"></h2>|offset|length|style|CODE|1239739|但是，你仍然需要通过javascript来调节高度|1239740|entityMap^0|0|0|1Z|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

if you want without blank space do it like this:

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

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

blocks|key|1239453|text|确定你真正想要页面的哪一部分放在顶部，然后把锚点放在那里。你无法改变浏览器解释锚点的方式--至少不能在不惹恼用户的情况下改变。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1239454|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1239844|text|在charles.cc.hsu's+answer的基础上，我们可以使用vh+CSS单位对任意高度的元素执行此操作，该单位与视口的高度相关。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1239845|HTML：|1239846|<span+class="anchor"+id="section1">
<div+class="section"></div>|code-block|syntax|javascript|1239847|CSS：|1239848|.anchor{
++++display:+block;
++++height:+50vh;+/*+50%25+viewport+height+*/
++++margin-top:+-50vh;
++++visibility:+hidden;
}|1239849|在IE9和更高版本中都支持vh，所以使用它非常安全。|1239850|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/29123823/8421261^0|Z|2|1|N|0|0|0|0|0|0|D|2|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

Extending off of <a href="https://stackoverflow.com/a/29123823/8421261">charles.cc.hsu's answer</a>, we can do this for elements of arbitrary height using the <code>vh</code> CSS unit, which is relative to the viewport's height.

HTML:

<pre><code>&lt;span class="anchor" id="section1"&gt;&lt;/span&gt;
&lt;div class="section"&gt;&lt;/div&gt;
</code></pre>

CSS:

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

<code>vh</code> is supported in in IE9 and up, so it's pretty safe to use.

blocks|key|1239585|text|由于“页面中间”在任何给定时间都与用户屏幕和窗口的大小有关，因此您必须使用Javascript来实现这一点，因为在纯HTML/CSS中无法获得垂直屏幕宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1239586|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1454442|text|我会尝试在目标锚点标签上设置等于页面高度一半的负边距(或其他定位方法)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1454443|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

blocks|key|1454575|text|Firefox支持在命名锚点上设置padding属性。在那里，您可以通过javascript设置一个包含浏览器尺寸的cookie，并相应地在服务器端调整您的填充顶部。对于最终用户来说，它看起来就像它的纯html/css，但noam是正确的，因为它需要一点JS来获取浏览器的尺寸，因为它不会在没有一点强制的情况下提供这些信息。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1454576|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1239884|text|$(window).on("load",+function+()+{
++++var+urlHash+=+window.location.href.split("#")[1];
++++if+(urlHash+&&++$('#'+%2B+urlHash).length+)
++++++++++$('html,body').animate({
++++++++++++++scrollTop:+$('#'+%2B+urlHash).offset().top-100
++++++++++},+1000);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1239885|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(window).on(&quot;load&quot;, function () {
 var urlHash = window.location.href.split(&quot;#&quot;)[1];
 if (urlHash &amp;&amp; $('#' + urlHash).length )
 $('html,body').animate({
 scrollTop: $('#' + urlHash).offset().top-100
 }, 1000);
});
</code></pre>

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: Making a link lead to the anchor centered in the middle of the page

服务器

我在我的html页面上有一个指向锚的链接。当单击该链接时，它会使页面滚动到锚点，以便锚点位于页面可见部分的最顶部。如何使页面滚动，使锚点位于页面中间？

问HTML:使链接指向位于页面中间的锚点
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML:使链接指向位于页面中间的锚点EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML:使链接指向位于页面中间的锚点
EN