如何设置 HTML 片段链接到的页面向下多远？答案

【问题标题】：How to set how far down a page a HTML fragment links to?如何设置 HTML 片段链接到的页面向下多远？
【发布时间】：2018-10-07 03:30:40
【问题描述】：

HTML 片段使用链接到使用/#page-section 链接到页面的特定部分的页面对我来说加载得太低了。

例如，我设置了一个<div id="engagment">，然后链接到site.com/#engagement，但它没有像这样链接到该部分的顶部： what I want to happen

有什么办法可以解决这个问题吗？

提前致谢。我是 html/web 开发新手。

【问题讨论】：

您的导航栏设置为固定导航栏并随页面滚动。它实际上已将您发送到正确的位置，但您的导航覆盖了文本的顶部。将 padding-top 添加到 div 的内部，等于导航高度。

【解决方案1】：

这是因为您有一个与该部分重叠的固定标题（实际上位于窗口顶部）。所以你需要创建一个偏移量。

一种常见的方法是通过CSS在链接的原始目标元素中添加一个不可见的伪元素，如下所示：

#page-section::before { 
  display: block; 
  content: " "; 
  margin-top: -150px; 
  height: 150px; 
  visibility: hidden; 
}

这将“扩展”具有该 ID 的元素，使锚点位于主元素上方 150 像素，而没有任何其他可见的变化。根据需要调整该值（即调整到固定标题的高度）

（padding-top 或 margin-top 会做类似的事情，但会在其中创建一个空白空间，您可能不一定想要）

【讨论】：

感谢您向我指出这一点，您提供的代码示例也很有帮助。我只是想澄清一下内容是什么：“”；属性？我不知道你为什么被否决。这是一个有用的答案！
该伪元素需要一些内容才能实际出现（尽管在这种情况下它是不可见的，因为没有“真实”内容）。在其他情况下，这可能是一些文本，但在这里您不需要任何文本，因此您只需使用 content: " ";
谢谢。我现在刚刚注意到另一个问题，当我单击片段的链接并重新加载到页面的该部分时，我用作片段的 div 周围会出现一个蓝色轮廓。你知道我怎么能阻止这种情况，也许我需要添加更多的 CSS 吗？再次感谢你。非常感谢您分享您的时间/知识。
我不完全确定我是否理解你的意思，但很可能是 focus 出现在链接、表单字段等“焦点”时，这对于可访问性很重要，即帮助不使用鼠标的人选择和激活（而不是单击）这些元素
你是对的。谢谢。对于后代，如果其他人有这个问题，我添加了 #page-section:focus{ outline: none; }