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

Question

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

例如，我设置了一个<div id="engagment"> ，然后链接到site.com/#engagement但不是这样，它链接到本节的顶部： 我想发生的事情

我明白了： 实际发生了什么

有什么我可以解决的吗？

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

Answer 1

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

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

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

这将以某种方式“扩展”具有该ID的元素，从而使锚点位于主元素上方150px，而没有任何其他可见的更改。 根据需要调整该值（即，调整为固定标头的高度）

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