浏览器原生锚点滚动将目标元素顶到视口顶部，但不避开fixed导航栏；需用scroll-margin-top（如#faq:target{scroll-margin-top:64px}）在目标元素上设置等于导航栏高度的偏移，safari≤15.4需js fallback。
为什么跳转后内容被 fixed 导航栏遮住
浏览器原生的锚点滚动行为会把 :target 元素顶到视口顶部，但不会自动避开 position: fixed 的导航栏。这不是 :target 本身的问题，而是滚动定位缺乏偏移补偿。
用 scroll-margin-top 修正滚动位置
现代浏览器（Chrome 92+、Firefox 90+、Safari 14.1+）支持直接在目标元素上设置偏移：
-
:target元素必须是实际被滚动到的那个 DOM 节点（比如<h2 id="faq"></h2>），不能只写在父容器上 - 推荐写法：
#faq:target { scroll-margin-top: 64px; }（值应等于 fixed header 的高度） - 单位建议用
px或rem，避免用%（计算基准不明确） - 配合
html { scroll-behavior: smooth; }才有平滑滚动效果
Safari ≤15.4 不支持 scroll-margin-top 怎么办
旧版 Safari 会忽略 scroll-margin-top，需 JS 补偿：
- 监听
hashchange事件，拿到当前location.hash - 用
document.querySelector(location.hash)找到目标元素 - 调用
element.scrollIntoView({ block: 'start', behavior: 'smooth' }) - 再手动减去 header 高度：
window.scrollBy(0, -64) - 注意：首次加载带 fragment（如
page.html#faq）时，hashchange不触发，得在DOMContentLoaded里也检查一次
别用 padding-top / margin-top 拉回内容
老方案如 :target { padding-top: 60px; margin-top: -60px; } 看似能“露出”内容，但有硬伤：
-
margin-top: -60px会破坏文档流，导致后续元素向上塌陷 - 如果目标元素本身有
border或background，视觉上仍可能被遮盖 - 当用户手动滚动页面后再次触发
:target，该 hack 可能失效或错位 - 无障碍阅读器可能误读负 margin 区域，影响可访问性
scroll-margin-top 是 W3C 标准方案，不干扰布局，也不影响语义，优先级和兼容性都更可靠——但得记住它只作用于被滚动到的那个元素本身，不是全局配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
