如何使用一行 CSS 防止锚链接滚动到粘性标题后面

简介

当我们在页面上使用锚链接进行跳转时，如果目标元素是一个粘性标题，可能会出现跳转后所需查看的内容被标题覆盖的情况。这时候我们可以通过一行 CSS 解决这个问题，让锚链接停留在标题上方。

解决方案

我们可以使用 CSS 的 scroll-padding-top 属性设置页面滚动时的内边距，从而将标题上移一定的距离，从而不被锚链接覆盖。

具体方法是，在需要跳转的标题元素上添加如下 CSS 样式：

scroll-padding-top: 100px;

其中 100px 的值可以根据实际情况去调整，以达到最佳效果。

实际应用时，我们可以将该样式类定义如下：

.anchor {
  scroll-padding-top: 100px;
}

然后在需要使用锚链接跳转的标题元素上添加类名 anchor，如下所示：

<h2 class="anchor" id="my-title">My Title</h2>

这样，当我们滚动到该标题处时，锚链接就会停留在标题上方，不会被标题覆盖。

总结

通过使用 CSS 的 scroll-padding-top 属性，我们可以很方便地解决锚链接跳转时被粘性标题覆盖的问题，提高了页面的用户体验。