锚点定位机制

  • 如果没有滚动条，锚点失效。
  • 如果有滚动条，滚动条滚动到地址 hash （地址 # 号后面的内容）对应的锚点元素 padding-box 上边缘位置。

方法一： 在滚动元素上设置 scroll-padding-top 属性

文档的滚动条属于 html，所以在 html 元素上设置。如果滚动条在其他元素上，将 scroll-padding-top 设置到附滚动条的元素即可。

html{
  scroll-padding-top: 60px;
}

方法二： :target 伪类

:target CSS 伪类 代表一个唯一的页面元素(目标元素)，其 id 与当前 URL 片段匹配 .

<h3 id="forth" class="heading">锚点链接</h3>

<style>
   #forth:target {
      padding-top: 60px;
      margin-top: -60px;
   }
</style>

方法三：padding + margin

padding 影响锚点元素的定位，margin 不影响锚点元素的定位。所以使用 padding 调整锚点元素跳转后的位置，使用 margin 抵消 padding 对布局的影响。

如下，对需要滚动的 h1 标签设置 padding + margin ：

h1 {
    padding-top:100px;
    margin-top:-100px;
}

padding-top 和 margin-top 的值就是固定导航栏的高度

缺点：当标题的文档层级和段落的文档层级不一致时会导致遮盖其他元素。例如：标题使用了 relative 定位提升了文档层级，会导致鼠标无法选中标题上方被布局遮挡的段落，从而无法复制文档。

方法四：用 span 或 a 标签作为锚点元素

非替换内联元素的 padding 不影响布局，但可以影响锚点位置。

<h3 class="heading">
    <span id="second" class="title_placeholder">
    2. require/exports 是运行时动态加载，import/export 是静态编译
    </span>
</h3>

.title_placeholder {
    padding-top: 60px;
}

原文来源：https://blog.csdn.net/qq_31005257/article/details/105469113