CSS scroll-padding-top 怎样让锚点避开固定导航栏

固定导航栏遮住页内锚点时，优先把导航栏的高度写进滚动容器的 scroll-padding-top。它调整的是滚动视口的“可用顶部”，让浏览器把锚点放到导航栏下方；如果只是某一个目标需要特殊留白，再考虑目标元素上的 scroll-margin-top。

这篇只处理一个常见故障：点击目录或页内链接后，目标标题已经跳到了顶部，却被 position: fixed 的导航盖住。示例使用静态说明图解释关系，不是浏览器截图，也没有把未执行的示例输出写成运行证据。

先还原固定导航遮挡锚点的症状

问题通常出现在三个对象之间：顶部固定导航不参与普通文档流，页面仍按完整视口计算滚动位置，而锚点目标会被放到滚动区域的上边缘。于是跳转动作本身成功了，但标题落在导航下面。

先把问题边界分清：导航的高度属于页面布局约束，锚点属于滚动定位目标，真正需要调整的是“滚动后允许目标出现的位置”。只给目标加普通 padding-top 往往会改变布局高度，不能稳定表达固定遮挡关系。

部署说明
部署说明

判断症状时不必先修改链接。只要确认导航是固定定位，并且目标标题在跳转后紧贴视口顶部，就可以进入滚动视口的调整方案。

用 scroll-padding-top 调整滚动视口

scroll-padding-top 定义的是滚动容器视口顶部的内缩空间。对整页锚点来说，常见做法是把它写在根元素上，并让值等于固定导航的实际高度。

:root {
  --nav-height: 64px;
  /* 让页内跳转的目标避开顶部固定导航 */
  scroll-padding-top: var(--nav-height);
  /* 平滑滚动只改变移动方式，不负责解决遮挡 */
  scroll-behavior: smooth;
}

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  height: var(--nav-height);
  /* 导航位于内容上方，因此需要配合滚动内缩 */
  z-index: 10;
}

关键点是选择正确的滚动容器。如果页面由 html 滚动，就在根元素上设置；如果是一个带 overflow: auto 的内容面板，就把属性放到这个面板上。属性放在不会滚动的父元素上，通常不会改变目标在实际滚动视口中的位置。

这里的 scroll-padding-top 不是给每个标题增加一块可见内容，也不是把导航从页面删除；它只告诉滚动定位算法，视口顶部有一段区域不适合作为目标落点。

用 scroll-margin-top 处理单个目标

如果一个页面的大多数锚点都不需要偏移，只有某个目标要留出额外空间，可以在目标元素上使用 scroll-margin-top：

.special-anchor {
  /* 只扩大这个目标的滚动区域顶部外边界 */
  scroll-margin-top: 96px;
}

两者的职责不同：scroll-padding-top 面向滚动容器，表达“这个视口顶部有统一不可用区域”；scroll-margin-top 面向目标元素，表达“这个目标靠近顶部时需要额外外扩”。固定导航对整页目录都生效时，容器级写法更容易维护。

不要把两个属性都当成“给标题加上边距”。前者改变滚动容器的目标区域，后者改变指定元素参与滚动定位时的外扩区域；当两者同时存在时，实际留白还会叠加，应该先确定谁拥有导航高度这个事实。

把导航高度和响应式变化统一起来

固定导航在窄屏上可能换行、折叠或变成两行。如果 scroll-padding-top 仍写死为 64px，宽度变化后就会出现“桌面端正常、移动端又被遮挡”或“留白过大”的反复问题。更稳妥的办法是让布局变量同时驱动导航高度和滚动内缩。

:root {
  --nav-height: 64px;
  /* 同一变量同时约束导航高度和滚动目标上边界 */
  scroll-padding-block-start: var(--nav-height);
}

.site-nav {
  height: var(--nav-height);
}

@media (max-width: 720px) {
  :root {
    --nav-height: 88px;
    /* 小屏导航变高时，锚点预留空间同步扩大 */
  }
}

如果导航高度由内容自然撑开，单纯复制一个固定数字就不够可靠，可以在布局层维护一个明确的高度变量，或在应用代码更新导航状态时同步更新 CSS 自定义属性。无论采用哪种方式，导航高度和滚动预留都应只有一个事实来源。

按容器与目标的职责选择写法

最后可以按这个顺序排查：确认真正滚动的元素；确认固定导航的实际高度；先在容器上设置 scroll-padding-top；只有单个目标有例外时，再补目标级的 scroll-margin-top。scroll-behavior 只影响滚动是否平滑，不能替代顶部预留。

scroll-padding-top 必须写在 html 上吗？

不必须。整页由根滚动容器承载时写在根元素上；局部滚动区域则写在真正拥有滚动条的容器上。

scroll-margin-top 和普通 margin-top 一样吗？

不一样。它服务于滚动定位和滚动捕捉时的目标区域，不等价于把元素在普通文档流中向下推开。

设置了 scroll-padding-top 还是被遮挡怎么办？

先检查属性是否写在实际滚动容器上，再检查导航高度是否因响应式布局变化；如果只有一个目标例外，再检查是否额外设置了目标级偏移。