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

StackOverflow https://stackoverflow.com/questions/1418838

  •  07-07-2019
  •  | 
  •  

题

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

有帮助吗？

解决方案 3

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

其他提示

我找到了一个解决方案使用固定标头锚定链接由菲利普发布，他是一名网页设计师。 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;
}

谢谢，菲利普！

HTML：

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

的CSS：

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

对我来说很好

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

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

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

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

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

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

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

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

延长 charles.cc.hsu的答案，我们可以使用<=为任意高度的元素执行此操作> 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，因此使用起来非常安全。

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top