锚点跳转被 fixed 导航栏遮挡是规范行为，根治方案是给 html 设置 scroll-padding-top（如 64px），配合 body padding-top 预留空间；局部微调可用 scroll-margin-top，禁用 margin-top 避免滚动错位。
锚点跳转默认对齐视口顶部，fixed导航栏不占文档流
浏览器执行 #section1 跳转时，会把目标元素的 padding-box 上边缘精准对齐到视口顶部（y=0）。而 position: fixed 的导航栏虽然视觉上在顶部，但它已脱离文档流——body 和主内容完全“看不见”它，也就不会自动预留空间。结果就是：元素物理位置被滚动到视口顶，但视觉上被导航栏盖住。
这不是 bug，是规范行为。W3C 明确规定锚点滚动以视口为基准，不感知页面中其他定位元素。
scroll-padding-top 是根治方案，必须作用于 html
给 html 元素设 scroll-padding-top，相当于告诉浏览器：“所有锚点滚动，请把目标元素对齐到距视口顶部 Npx 的位置”。它直接修改滚动终点，无需 JS、不干扰布局。
- 值必须等于导航栏实际高度（含
padding、border），例如scroll-padding-top: 64px - 不能写在
body上——body不是根滚动容器，该属性无效 - 兼容性足够好：Chrome 69+、Firefox 68+、Safari 15.4+、Edge 79+；旧 Safari 可用
@supports降级
scroll-margin-top 适合单个锚点微调
当只有部分标题需要避让（比如只有一级标题要露出，二级不用），或导航栏高度响应式变化时，直接给目标元素加 scroll-margin-top 更灵活。
- 例如：
#faq { scroll-margin-top: 80px; } - 支持
calc()：scroll-margin-top: calc(64px + 1rem); - 注意：祖先元素不能有
overflow: hidden或clip-path，否则该属性失效 - 和
scroll-padding-top不冲突，可共存——后者管全局，前者管局部
别碰 margin-top 推内容，容易引发滚动错位
给 body 或主容器加 margin-top 看似简单，但实际埋雷：
- Safari 和部分安卓 WebView 里，
margin-top会导致scrollIntoView()计算偏移异常，锚点跳转后上下抖动 - 如果导航栏高度动态变化（比如折叠/展开），JS 更新
margin容易滞后，造成一帧遮挡 -
margin改变的是元素自身位置，但锚点定位仍按原始 DOM 坐标计算，逻辑割裂
真正稳的解法永远是：用 scroll-padding-top 控制滚动终点，用 padding-top 在 body 上预留静态空间——两者分工明确，互不干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
