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

Question

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

Answer 1

我找到了一个由菲利普发布的Anchor Links With A Fixed Header解决方案，他是一名网页设计师。 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

Firefox支持在命名锚点上设置padding-top属性。从那里，您可以通过包含浏览器尺寸的javascript设置cookie，并相应地调整您的填充顶部服务器端。对于最终用户来说，它看起来像纯粹的html / css，但是noam是正确的，因为它需要一点点JS才能获得浏览器的维度，因为它没有一点点强制就不会给你这些信息。

Answer 3

HTML：

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

CSS：

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

对我来说很好

Answer 4

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

Answer 5

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

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

使用-50vh，锚点将在屏幕中间滚动。

Answer 6

如果你想要没有空格，就这样做：

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

但是，你仍然需要从javascript调节高度

Answer 7

确定您在顶部实际需要的页面部分，然后将锚点放在那里。您将无法改变浏览器解释锚点的方式 - 至少在不破坏用户的情况下也是如此。

Answer 8

由于“页面中间”是在任何给定时间相对于用户屏幕和窗口的大小，因此您将不得不使用Javascript来实现此目的，因为在纯HTML / CSS中无法获得垂直屏幕宽度。

Answer 9

延伸charles.cc.hsu's answer，我们可以使用vh CSS单位对任意高度的元素执行此操作，该单位相对于视口的高度。

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;
}

在IE9及更高版本中支持vh，因此使用起来非常安全。

Answer 10

我会尝试将负边距（或其他定位方法）等于目标锚标记的页面高度的一半。