scroll-padding-top必须写在html上，因其仅对根滚动容器生效；用css变量--nav-height配合媒体查询动态控制，并为锚点元素设置scroll-margin-top以避免被导航栏遮挡。
直接用 html { scroll-padding-top: var(--nav-height); } 就行，其他方案要么漏场景，要么维护成本高。
为什么scroll-padding-top必须写在html上
它只对根滚动容器生效，而页面级滚动上下文就是 html 元素。写在 body 上在 Safari 15.3 及更早版本完全不生效；Chrome 和 Firefox 行为也不一致。写在 main 或某个 section 上则根本没意义——那些不是滚动容器。
-
html { scroll-padding-top: 56px; }✅ 全局生效，覆盖点击链接、URL hash 变化、浏览器前进/后退所有路径 -
body { scroll-padding-top: 56px; }❌ 多数情况静默失效，尤其 iOS/Safari - 如果页面里有
overflow: hidden在html或body上，这个属性会直接被禁用
怎么让导航栏高度变化时scroll-padding-top自动同步
Bootstrap 5 的 fixed-top 导航栏桌面端常是 56–72px，小屏折叠后缩到 40–48px。硬写死一个像素值，大屏遮挡、小屏多留白。
- 用 CSS 自定义属性统一管理：
:root { --nav-height: 56px; } - 配合媒体查询动态更新：
@media (max-width: 767px) { :root { --nav-height: 48px; } } - 最终设在
html上：html { scroll-padding-top: var(--nav-height); } - 别用
%单位——它按视口宽度算，不是高度，极易错位
锚点跳转后标题还是被盖住？补scroll-margin-top就行
即使 scroll-padding-top 设对了，浏览器默认仍把目标元素顶到视口顶端，刚好卡在固定导航栏底下。这时得给锚点元素自身加偏移。
- 直接加在带
id的标题上：h2[id] { scroll-margin-top: var(--nav-height, 56px); } - 不能写在父容器上，这个属性只对锚点元素本身有效
- 值必须和当前生效的导航高度一致，所以复用
--nav-height最省事 - 如果不同页面固定区域高度不一（比如首页带 banner），就得单独设，维护成本明显上升
真正难的是量准那个“刚好不遮”的像素值
别信 Bootstrap 文档写的 56px。你改过 .navbar 的 padding、font-size、加了 logo 图片，或者用了 navbar-expand-xx 类，实际高度就变了。必须用 DevTools 的 Computed 面板看真实 height 值，再减去 1px —— 这个差值往往是浏览器渲染四舍五入导致的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
