fixed导航栏遮挡锚点内容是因浏览器将目标元素顶部对齐视口顶部，而scroll-padding-top（设于html）可精准偏移滚动终点，仅影响滚动逻辑不破坏布局，chrome89+/firefox90+/safari15.4+原生支持。
fixed元素遮挡锚点跳转内容的典型表现
点击 #section2 这类链接跳转后，目标元素顶部被 header 或 nav（设置了 position: fixed）盖住，实际可见内容从目标元素中部甚至底部开始。这不是浏览器 bug，而是标准行为：锚点滚动会把目标元素顶部对齐视口顶部，而 fixed 元素已占据顶部空间。
常见错误解法是给目标元素加 margin-top 或 padding-top，但这会导致正常流布局错位、打印样式异常、响应式断点失效——本质是用布局 hack 治滚动问题。
scroll-padding-top 是专为此场景设计的 CSS 属性
scroll-padding-top 告诉浏览器：“当我滚动到某个锚点时，请把目标元素顶部对齐到视口顶部往下 offset 的位置”，它只影响滚动定位逻辑，不改变文档流或盒模型。
实操建议：
- 在根元素（
html或body）上设置，确保全局生效：html { scroll-padding-top: 64px; /* 与 fixed header 高度一致 */ } - 若 fixed 元素高度响应式（如移动端变矮），用
clamp()或媒体查询动态调整：@media (max-width: 768px) { html { scroll-padding-top: 56px; } } - 避免设在
body上——某些浏览器（如旧版 Safari）对body的scroll-padding支持不稳定，html更可靠 - 值推荐用 px 或 rem，慎用百分比（%），因为它是相对于滚动容器（通常是视口）宽度计算，而非高度，易导致错位
兼容性与降级方案
scroll-padding-top 在 Chrome 89+、Firefox 90+、Safari 15.4+ 均已稳定支持。Edge 基于 Chromium 同步跟进。
如需兼容 Safari 15.3 及更早版本，可搭配 JS 降级：
- 监听
hashchange，检测 URL 中的锚点 - 用
getBoundingClientRect()获取目标元素位置，手动调用window.scrollBy()补偿 fixed 头部高度 - 但注意：此方式会触发两次滚动（原生跳转 + 手动修正），可能有闪烁；仅当必须支持 iOS 15.3 以下设备时才启用
为什么不能只靠 JavaScript 滚动控制？
单纯用 element.scrollIntoView({ block: 'start' }) 并指定 offset，无法接管原生锚点跳转行为（比如用户直接修改 URL hash、点击书签、后退前进）。scroll-padding-top 是唯一能无缝覆盖所有锚点触发路径的声明式方案。
真正容易被忽略的是：这个属性必须作用于**滚动容器本身**（通常就是 html），而不是目标元素或 fixed 元素。设错位置等于没设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
