scroll-padding-top 必须写在 html 上且值等于导航栏视觉总高度，避开 sticky 干扰；与 scroll-margin-top 同时使用会叠加偏移，局部滚动需设在对应容器上。
scroll-padding-top 本身没有 Bug，偏移是配置错位或上下文理解偏差导致的——它只在正确容器、匹配真实高度、避开 sticky 干扰时才精准生效。
scroll-padding-top 必须写在 html 上，不是 body 或目标元素
浏览器的根滚动容器是 html 元素，scroll-padding-top 只对它生效。写在 body 上在 Safari 和部分旧 Edge 中完全被忽略；写在 #about 上则无任何效果。
- ✅ 正确：
html { scroll-padding-top: 64px; } - ❌ 错误：
body { scroll-padding-top: 64px; } - ❌ 错误：
#about { scroll-padding-top: 64px; }
例外：若你手动创建了局部滚动容器（如 aside { overflow-y: auto; }），那 scroll-padding-top 就得写在那个 aside 上，且锚点跳转必须限定在该容器内（不能用全局 href="#id"）。
值必须等于导航栏「视觉遮挡总高度」，不是 height 单独值
固定导航栏占据的垂直空间 ≠ CSS 中写的 height。它还包括 padding-top、border-top、box-shadow 的视觉延伸，甚至 transform: translateY(-100%) 这类隐藏逻辑也会让 DOM 高度失真。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → 选中导航栏 → 看 Computed 面板里的
height+ 所有向上方向的占用（padding-top、border-top-width、阴影扩散等） - 移动端导航栏折叠后变矮？别写死
80px，改用媒体查询：@media (max-width: 768px) { html { scroll-padding-top: 48px; } } - 推荐抽成变量：
:root { --nav-height: 64px; }，再写html { scroll-padding-top: var(--nav-height); }
遇到 position: sticky 导航栏，scroll-padding-top 会失效
sticky 在滚动中动态“吸附”到顶部，但它的占位高度随滚动状态变化；而 scroll-padding-top 是静态偏移，无法响应这种切换。结果就是：页面刚加载时准，一滚动 sticky 激活后，锚点立刻被盖住。
- 最稳解法：把导航栏改成
position: fixed（语义清晰、行为可预测） - 次选方案：放弃
scroll-padding-top，改用scroll-margin-top+display: flow-root组合（前提是目标元素父容器已清除浮动） - 不要试图用 JS 动态改
scroll-padding-top—— 它不支持运行时重计算，改了也无效
和 scroll-margin-top 同时存在会叠加偏移
两者作用机制不同，但最终都影响滚动终点位置。如果同时设置，浏览器会把两个值相加，导致过度上移。
- 例如：
html { scroll-padding-top: 64px; }+#about { scroll-margin-top: 20px; }→ 实际上移 84px - 全站统一导航栏高度？优先用
scroll-padding-top，删掉所有scroll-margin-top - 仅个别区块需额外留白？去掉
scroll-padding-top，只在对应目标元素上设scroll-margin-top - 检查是否误用了
::target伪类：::target { scroll-margin-top: 64px; }在 Safari 中偶现不触发，不推荐
最容易被忽略的是：你改了导航栏的 padding 或加了 box-shadow，却没同步更新 scroll-padding-top 值——它不会自动感知样式变化，必须人工校准。
