scroll-margin-top 是现代浏览器原生支持的零 js 锚点留白方案，需写在带 id 的目标元素上，值严格匹配固定头部总高度，推荐用 css 变量统一管理并响应式更新。
直接在目标元素上加 scroll-margin-top，值等于固定头部高度，就能让锚点滚动后自动留白——这是现代浏览器原生支持的零 JS 方案，比改 margin-top 或插空 div 安全得多。
scroll-margin-top 必须写在目标元素本身上
它只对带 id 的锚点目标生效，比如 <section id="contact"></section>，而不是它的父容器、body 或导航栏。
- ✅ 正确：
#contact { scroll-margin-top: 64px; }或section[id] { scroll-margin-top: 4rem; } - ❌ 错误：
body { scroll-margin-top: 64px; }（无效）、.nav { scroll-margin-top: 64px; }（不作用于滚动目标） - ⚠️ 注意：
:target { scroll-margin-top: 64px; }看似省事，但在 Safari 中偶现失效，不推荐
数值必须严格匹配导航栏真实高度
scroll-margin-top 的值不是“大概估”，而是要和 sticky/fixed 导航栏的**总高度**（含 border、padding）完全一致，否则仍会遮挡或过度上移。
- 推荐抽成 CSS 变量统一管理：
:root { --nav-height: 64px; }，再写scroll-margin-top: var(--nav-height); - 响应式场景下，用
@media动态更新变量值，比给每个元素写多套规则更可控 - 避免混用单位：导航栏用
rem，scroll-margin-top就别用px，否则缩放时易出偏差
scroll-margin-top 和 scroll-padding-top 的分工
两者都能影响滚动终点，但作用对象和适用粒度不同，选错会导致叠加偏移或失效。
-
scroll-margin-top：写在目标元素上，适合局部微调（如仅#faq需要额外 20px），或导航栏高度不统一的页面 -
scroll-padding-top：写在滚动容器（通常是html）上，影响所有锚点，适合全站固定高度导航栏，例如：html { scroll-padding-top: 64px; } - 如果同时设置，偏移量会相加——比如
html { scroll-padding-top: 64px; }+#about { scroll-margin-top: 20px; }，最终上移 84px
兼容性与降级表现
Chrome 69+、Firefox 68+、Safari 15.4+、Edge 79+ 均已原生支持，旧版浏览器会直接忽略该属性，回退到默认滚动（无偏移），功能不受影响。
- 不需要 JS 回退也能保底可用，但若必须支持 Safari scrollIntoView({ block: 'start', behavior: 'smooth' }) 手动控制
-
scroll-margin-top不触发重排，不影响布局流，也不会撑开父容器——这点和margin-top有本质区别 - 服务端渲染（SSR）项目中，该属性在 hydration 前就已生效，不存在 DOM 未就绪问题
最容易被忽略的是：它只在“滚动定位行为”中起效，比如点击锚点、scrollIntoView()、或浏览器恢复滚动位置（history.scrollRestoration）。如果你用 window.scrollTo() 手动计算 top 值，这个属性不会自动参与计算——得自己把偏移量减进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
