HTML：如何使链接跳转到位于页面中心的锚点

Question

我有一个指向 HTML 页面上锚点的链接。当点击该链接时，页面会滚动到锚点位置，使其位于页面可见部分的顶部。如何让页面滚动，以使锚点位于页面中间？

- olamundo

Answer 1

我找到了一个由网页设计师Phillip发布的解决方案“固定头部的锚点链接”。Phillip在锚点位置添加了一个新的空SPAN。

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

谢谢，菲利普！

- charles.cc.hsu

Answer 2

添加一个 <span class="anchor" id="X">，然后将 anchor 类样式设置为：

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

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

- Gianluca Pietrobon

---

这看起来是一个非常好的和干净的解决方案。请注意浏览器支持：https://www.w3schools.com/cssref/css3_pr_transform.asp - cgogolin

很棒的答案！不过还不完整：我会在.anchor类中添加“top:50%”。请注意，锚点的父元素应该具有“relative”或“absolute”定位属性。 - Insider

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

对我来说运行良好

- jakub

---

太棒了！这再简单不过了。 - fbiazi

这是对我有效的解决方案。得到最多赞的答案并没有起作用。 - Eosis

Answer 4

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

- olamundo

Answer 5

如果您想去掉空格，请按以下方式操作： <h2 id="jump_tag" style="padding-top: 500pt; margin-top: -500pt;"></h2> 但是，您仍然需要通过JavaScript来调整高度。

- Sly_TheKing

Answer 6

在 charles.cc.hsu的答案 的基础上，我们可以使用相对于视口高度的 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;
}

vh 即视口高度，自IE9版本开始已经支持，因此可以放心使用。

- Ruby Tunaley

Answer 7

确定你实际想要置于页面顶部的部分，并将锚点放在那里。你不能改变浏览器解释锚点的方式——至少不会让你的用户感到困扰。

- Tomas Aschan

---

根据浏览器窗口的宽度和页面流动的方式，这种方法可能会导致实际锚点位于视口下方。我会选择使用JavaScript解决方案，认识到没有JavaScript的浏览器将不得不在没有这个高级功能的情况下处理。 - Carl G

Answer 8

由于“页面中间”是相对于用户屏幕和窗口在任何给定时间的大小而言的，因此您需要使用Javascript来实现这一点，因为在纯HTML/CSS中没有办法获取垂直屏幕宽度。

- Kenan Banks

---

垂直屏幕宽度，又称屏幕高度？ - LarsH

Answer 9

$(window).on("load", function () {
    var urlHash = window.location.href.split("#")[1];
    if (urlHash &&  $('#' + urlHash).length )
          $('html,body').animate({
              scrollTop: $('#' + urlHash).offset().top-100
          }, 1000);
});

- Arunprasanth M

Answer 10

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

- user186369