锚点导航默认顶部对齐，需用scrollIntoView({block: 'center'})实现垂直居中，配合scroll-margin-top解决sticky头部遮挡；SPA中需绕过路由拦截处理hash跳转。
锚点导航本身不提供居中能力，a 标签的默认行为是跳转到目标元素的顶部对齐视口顶部；所谓“居中”，必须靠 CSS 或 JS 主动干预，否则永远会卡在顶部被 sticky 头部遮挡或内容偏上。
锚点跳转后目标元素如何垂直居中显示
原生锚点跳转（href="#faq"）无法控制对齐方式，浏览器固定用 block: 'start'。要让目标元素出现在视口中央，得弃用原生跳转，改用 scrollIntoView() 并显式指定参数：
document.getElementById('faq').scrollIntoView({ behavior: 'smooth', block: 'center' });-
block: 'center'是关键，它让元素垂直方向居中（注意：不是水平居中） - 若目标是卡片、FAQ 条目等独立区块，
block: 'center'比'start'更友好；但会切掉顶部导航栏，需配合margin-top或scroll-margin-top补偿 - Safari 15.4 以下不支持
behavior: 'smooth'，可降级为behavior: 'auto'或用 polyfill
带固定头部时锚点内容被遮挡怎么修
页面有 position: sticky 或 fixed 的导航栏（比如高 60px），原生锚点跳转后目标元素顶部会被盖住——这不是 bug，是滚动定位逻辑导致的。
- 最简方案：给目标元素加 CSS
scroll-margin-top: 60px（单位必须是 px/em/rem，不能是 %） - 兼容性好，Chrome 89+、Firefox 87+、Safari 15.4+ 均支持；旧版 Safari 只能靠 JS 计算偏移量再调
window.scrollTo() - 别用
margin-top: -60px+padding-top: 60px这种 hack，会导致布局重排和 focus outline 错位 - 如果目标元素本身用了
transform: translateY()，scroll-margin-top仍有效；但scrollIntoView()在 transform 元素上可能计算不准，优先用 CSS 方案
如何让整个锚点导航菜单水平居中
导航菜单（一串 a 标签）本身居中，和锚点跳转行为无关，纯属 CSS 布局问题：
立即学习“前端免费学习笔记（深入）”；
- 包裹容器用
text-align: center（适用于 inline 元素如a）或display: flex; justify-content: center - 避免给
a设display: block后又用margin: 0 auto，那需要明确宽度，反而容易错乱 - 移动端要注意：flex 布局下
flex-wrap: wrap配合justify-content: center能让换行后的多行导航也居中 - 别在
a上直接写style="text-align:center"——text-align对 inline 元素无效，它只作用于其父容器
单页应用（SPA）里点击导航没反应？先看路由是否劫持了 hash
Vue Router / React Router v6 默认拦截所有带 # 的 URL 变更，href="#contact" 点击后页面不动，控制台也无报错——这是设计使然，不是代码写错了。
- Vue Router：在
router.beforeEach中判断to.hash是否存在，存在则next(false)中断，并手动执行document.querySelector(to.hash)?.scrollIntoView() - React Router v6：别用
useNavigate('#pricing')，改用原生window.location.hash = '#pricing'，绕过路由系统 - SSR 场景下首次加载时
window.location.hash可能为空，得在useEffect(() => { ... }, [])或mounted钩子里补查并触发滚动 - 服务端 Nginx/Apache 不需要特殊配置，hash 不发往服务端，纯前端行为
真正难的不是写几行 scrollIntoView，而是判断该用 CSS 还是 JS、该修滚动偏移还是修布局结构、以及在 SPA 里识别出“不是代码错了，是路由故意拦了”。这些决策点，比语法本身更容易卡住人。
