38

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

4

11 回答 11

20

我找到了Phillip 发布的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;
}

谢谢，菲利普！

于 2015-03-18T13:47:16.940 回答
15

放置一个<span class="anchor" id="X">then 样式anchor类，如：

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

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

于 2017-12-27T15:54:30.143 回答
10

html:

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

CSS：

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

对我来说很好

于 2011-03-12T00:13:15.557 回答
7

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

于 2009-10-02T15:53:21.993 回答
4

如果您想要没有空格，请这样做：

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

但是，你仍然需要通过 javascript 来调节高度

于 2016-07-25T09:52:11.273 回答
2

确定您真正想要的页面的哪个部分位于顶部，然后将锚点放在那里。您将无法更改浏览器解释锚点的方式 - 至少不会让您的用户感到不安。

于 2009-09-13T21:25:15.460 回答
2

扩展charles.cc.hsu 的答案，我们可以使用 CSS 单元对任意高度的元素执行此操作，该vh单元与视口的高度相关。

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

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

于 2018-08-16T05:43:09.543 回答
1

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

于 2009-10-02T15:55:50.303 回答
0

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

于 2009-10-08T13:18:18.427 回答
0

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

于 2009-09-13T21:32:32.367 回答
0 
$(window).on("load", function () {
    var urlHash = window.location.href.split("#")[1];
    if (urlHash &&  $('#' + urlHash).length )
          $('html,body').animate({
              scrollTop: $('#' + urlHash).offset().top-100
          }, 1000);
});
于 2021-09-24T13:45:23.283 回答