HTML：使链接指向页面中间的锚点

Posted 2023-03-29

【中文标题】HTML：使链接指向页面中间的锚点

【英文标题】：HTML: Making a link lead to the anchor centered in the middle of the page

【发布时间】：2010-11-27 23:28:02

【问题描述】：

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

【参考方案1】：

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

谢谢，菲利普！

【参考方案2】：

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

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

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

【讨论】：

这看起来是一个非常好的和干净的解决方案。注意浏览器支持：w3schools.com/cs-s-ref/css3_pr_transform.asp

绝妙的答案！虽然不完整：我也会在 .anchor 类中添加“top:50%”。请注意，锚的父级应该是“相对”或“绝对”位置属性

【参考方案3】：

html:

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

css:

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

对我来说很好用

【讨论】：

太棒了！再简单不过了。

这是对我有用的解决方案。投票最多的答案没有。

【参考方案4】：

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

【参考方案5】：

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

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

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

【参考方案6】：

确定您实际希望将页面的哪一部分放在顶部，然后将锚点放在那里。您将无法更改浏览器解释锚点的方式 - 至少不会让您的用户感到不安。

【讨论】：

根据浏览器窗口的宽度和页面的流动方式，此方法可能会导致实际锚点位于视口下方。我会使用 javascript 解决方案，认识到没有 javascript 的浏览器将只需要处理没有花哨的功能。

【参考方案7】：

扩展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;

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

【参考方案8】：

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

【讨论】：

垂直屏幕宽度，也就是屏幕高度？

【参考方案9】：

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

【参考方案10】：

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

【参考方案11】：

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