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

Question

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

例如，我设置了一个 <div id="engagment"> 然后 link 到 site.com/#engagement 但不是 link 到该部分的顶部，如下所示： what I want to happen

我能做些什么来解决这个问题吗？

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

Answer 1

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

一种常见的方法是通过CSS向link的原始目标元素添加一个不可见的伪元素，像这样：

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

这将 "extend" 具有该 ID 的元素以一种方式使锚点位于主元素上方 150 像素，而没有任何其他可见的变化。根据需要调整该值（即调整到固定 header 的高度）

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

How to set how far down a page a HTML fragment links to?