scroll-padding-top 必须设在 html 元素上，因为锚点跳转的滚动容器是 html 而非 body 或 main；写在 body 上在 Safari 15.3 及更早版本无效，Chrome/Firefox 行为也不一致。
直接用 html { scroll-padding-top: 56px; } 就能解决，不需要 js，也不用改 html 结构 —— 但必须写在 html 元素上，且值要匹配你实际的导航栏高度。
为什么 scroll-padding-top 必须设在 html 上
锚点跳转的滚动容器是 html 元素，不是 body 或 main。写在 body 上在 Safari 15.3 及更早版本中完全不生效，Chrome/Firefox 行为也不一致。
常见错误：body { scroll-padding-top: 56px; } ❌；html { scroll-padding-top: 56px; } ✅。
如何让导航栏高度变化时自动适配
Bootstrap 5 的 fixed-top 导航栏在桌面端通常是 56px，移动端折叠后常缩为 48px 或 40px。硬写死一个像素值会导致小屏多留白、大屏仍遮挡。
推荐用 CSS 自定义属性统一管理：
:root { --nav-height: 56px; }
@media (max-width: 767px) {
:root { --nav-height: 48px; }
}
html { scroll-padding-top: var(--nav-height); }
注意：% 单位不能用 —— 它按视口宽度计算，不是高度，极易错位。
scroll-margin-top 适合什么场景
只给少数几个标题（如 h2#about）加偏移，或不同页面固定区域高度不统一（比如首页有 banner、其他页没有）时更灵活。
必须直接加在目标元素上：
h2[id] { scroll-margin-top: var(--nav-height, 56px); }
不能写在 body 或 main 上 —— 这个属性只对带 id 或 name 的锚点元素本身有效。
如果目标元素本身有 transform 或 margin-top，scroll-margin-top 可能失效，此时优先用 scroll-padding-top。
哪些情况会让 scroll-padding-top 静默失效
即使代码写对了，也可能因以下原因不生效：
-
html或body上写了overflow: hidden—— 这会禁用根滚动容器的 scroll padding 行为 - 页面用了 SPA 路由器（如 Vue Router、React Router），它劫持了原生滚动，没调用
scrollIntoView或绕过了 CSS 滚动偏移 - 目标元素设置了
position: relative+top等偏移，干扰了浏览器定位逻辑
真正难的是测出那个“刚好不遮、不多留”的像素值 —— 别信文档里写的 56px，打开 DevTools 看 Computed 面板里的 height，才是真实高度。
