锚点链接必须用id而非name，现代浏览器仅识别id作为跳转目标；scroll-margin-top是解决fixed header遮挡的正确方式；SPA中需用JS scrollIntoView替代原生href="#xxx"。
锚点链接必须用 id，不是 name
现代浏览器（Chrome、Firefox、Safari 最新版）已完全不认 name 属性作为跳转目标，只匹配元素的 id。写错就静默失败——点链接，URL 变了，页面却纹丝不动。
实操建议：
- 给目标元素（
<h2>、<div>、<section>都行）加id="section-contact"这类合法值：小写字母、短横线、无空格/中文/特殊符号 - 链接写成
<a href="#section-contact">联系我</a>，#不能漏，也不能多写/ - 用开发者工具运行
document.getElementById("section-contact")，确认返回唯一非null元素；重复id时浏览器只取第一个
scroll-margin-top 是解决 fixed header 遮挡的正确方式
点击锚点后内容被顶部导航栏盖住，不是 bug，是浏览器把目标元素顶部对齐视口顶部，而 position: fixed 的导航栏没参与文档流。
别用 padding-top + margin-top 挤开目标元素——这会破坏布局、影响可访问性、在响应式下失效。
立即学习“前端免费学习笔记（深入）”；
正确做法：
- 给目标元素加 CSS：
h2[id] { scroll-margin-top: 64px; }，数值等于 fixed header 实际高度（含 border/padding） - 该属性只对带
id的元素生效，且要求目标在可滚动上下文内（不在overflow: hidden容器里） - 兼容性：Chrome 69+、Firefox 68+、Safari 15.4+；旧版 Safari 可降级用
html { scroll-padding-top: 64px; }
SPA 中原生 href="#xxx" 基本失效
Vue、React、Svelte 等框架默认拦截所有 a 标签跳转，尤其用了 vue-router 或 react-router 后，href="#xxx" 被吞掉，既不滚动也不报错。
实操建议：
- 放弃依赖原生行为，改用 JS 主动滚动：
document.getElementById("section-2").scrollIntoView({ behavior: "smooth", block: "start" }) - React 中用
useEffect+ref.current.scrollIntoView；Vue 中用this.$nextTick(() => this.$refs.target.scrollIntoView(...)) - 监听
hashchange事件做菜单高亮时，确保目标元素已挂载；动态加载内容需等 AJAX 完成再绑定逻辑
平滑滚动该用 scroll-behavior: smooth 还是 JS？
CSS 方案最轻量：html { scroll-behavior: smooth; } 一行生效，但 Safari 15.4 之前不支持，老版本直接退化为瞬移，不报错也不 fallback。
JS 方案更可控：
- 用
window.scrollTo({ top: target.offsetTop - 60, behavior: "smooth" })可精确控制偏移（比如减去导航栏高度） - 配合
history.pushState(null, null, "#xxx")更新 URL，避免触发页面重载 - 注意：
scrollIntoView的block: "start"比"center"更安全，后者可能切掉固定头部
动态生成锚点时，id 命名要防重——加索引或哈希，否则同名 id 在 DOM 中一多，后续跳转全指向第一个，调试时很难发现。
