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

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，锚点将在屏幕中间滚动。

Answer 5

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

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

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

Answer 6

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

Answer 7

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

Answer 8

从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 9

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

Answer 10

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

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

10 个答案: