HTML:将链接引导到以页面中间为中心的锚点

Question

我在html页面上有一个锚点的链接.单击链接时,会导致页面滚动到锚点,以使锚点位于页面可见部分的最顶部.如何使页面滚动以使锚点位于页面中间？

Answer 1

我找到了一个解决方案Anchor Links With A Fixed Header由Phillip发布,他是一名网页设计师.Phillip添加了一个新的EMPTY跨度作为锚定位置.

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

然后把下面的css代码

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

谢谢,菲利普!

Answer 2

HTML:

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

CSS:

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

对我来说很好

Answer 3

在纯html\css中没有直接的方法.虽然使用js,但可以通过获取元素的顶部位置并将页面的顶部位置设置为该元素的位置减去页面高度的一半来实现.

Answer 4

放置一个<span class="anchor" id="X">然后设置样式的anchor类，如：

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

随着-50vh锚将在屏幕中间滚动。