scroll-padding-top 必须写在 html 元素上才生效，因浏览器根滚动容器是 html；写在 body 或目标元素上无效，safari 15.3 及更早版本完全不支持；局部滚动容器需写在其自身上且锚点跳转限于该容器内。
scroll-padding-top 必须写在 html 上，不是 body 或目标元素
浏览器的根滚动容器是 html 元素，scroll-padding-top 只对它生效。写在 body 上在 Safari 15.3 及更早版本完全不生效；Chrome 和 Firefox 行为也不一致；写在 #about 或 header 上则根本无效果。
✅ 正确写法：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-width、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 会失效
position: 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; }+h2[id] { scroll-margin-top: 64px; }→ 实际偏移 128px - 只在需要微调的个别元素上用
scroll-margin-top，比如某些标题比其他高，或某页 banner 更厚 - 若全站导航高度统一，优先用
scroll-padding-top；若只有少数几个区块需避让，才单独加scroll-margin-top
真正容易被忽略的是：这个属性只修正滚动终点，不改变任何布局。如果你发现设置了还是遮挡，第一反应不该是加 JS，而是检查 html 是否被意外加了 overflow: hidden，或者导航栏高度算错了——这两个问题占了线上故障的八成以上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
