锚点目标必须用id属性，现代浏览器已忽略name属性；id值需全小写、无空格和特殊字符；href哈希值须严格匹配；用scroll-margin-top解决fixed导航栏遮挡；SPA中需绕过路由拦截；首屏hash需手动触发scrollIntoView。
锚点目标必须用 id，不能只靠 name
现代浏览器（Chrome 61+、Firefox 68+、Safari 15.4+）已完全忽略 name 属性做锚点定位。哪怕你写了 <a name="top"></a> 或 <h2 name="faq"></h2>，href="#faq" 也不会滚动过去。
必须给目标元素显式设置 id 属性，且满足以下条件：
-
id值全小写、无空格、不含中文或特殊符号（如id="api-reference"✅，id="API 参考"❌） -
href中的哈希值必须严格匹配：href="#api-reference"，开头的#不能漏，也不能多写/或空格 - 用开发者工具执行
document.getElementById("api-reference")，确认返回的是唯一、非null的 DOM 元素；多个同名id时，浏览器只取第一个，极易导致跳转错位
scroll-margin-top 是解决 fixed 导航栏遮挡的首选方案
点击锚点后标题被顶部 position: fixed 的导航栏盖住，不是 bug，而是原生行为 —— 浏览器以文档顶部为滚动基准，不考虑视觉偏移。
别用 margin-top 或 padding-top 单独撑开目标元素，这会破坏布局流，尤其在响应式断点下引发高度塌陷或重叠。
立即学习“前端免费学习笔记（深入）”；
正确做法是统一加 CSS：
h2[id], h3[id], section[id] {
scroll-margin-top: 60px;
}
该属性在主流新浏览器中直接生效，不影响 SSR 渲染，也不需要 JS 干预。旧版 Safari 可兜底用 window.addEventListener('hashchange', () => { window.scrollBy(0, -60); })，但必须加节流防抖。
单页应用（SPA）中 href="#xxx" 不滚动？绕过路由拦截
Vue Router、React Router v6+ 默认把所有 #xxx 当作路由路径处理，<a href="#faq"> 点击后既不滚动，也可能报 404。
可行解法按优先级排列：
- Vue：改用
<router-link to="#faq" custom v-slot="{ navigate }"><a @click="navigate">跳转</a></router-link> - React（v6+）：确保使用
createHashRouter，且<Link to="#faq">没被自定义useNavigate覆盖 - 通用兜底：删掉
href，用onclick触发document.querySelector(location.hash)?.scrollIntoView({ behavior: 'smooth' })，但 SSR 首屏需手动补一次if (location.hash) handleHashChange()
监听 hashchange 时首屏不触发？必须手动检查初始 hash
hashchange 事件只在 hash 值**改变时**触发，页面首次加载带 hash 的 URL（如 example.com/#faq）时，该事件根本不会触发 —— 这是多数“首屏不滚动”问题的根源。
必须显式检查初始状态：
function handleHashChange() {
const target = document.querySelector(location.hash);
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
}
// 页面加载时立即执行
if (location.hash) handleHashChange();
// 后续变更再监听
window.addEventListener('hashchange', handleHashChange);
注意：document.querySelector(location.hash) 必须判空，否则 scrollIntoView 在目标不存在时会抛错，中断后续逻辑。
动态生成的锚点（比如 CMS 渲染的标题）更要小心：DOM 加载完成前就执行 handleHashChange 会导致查不到元素，得等 DOMContentLoaded 或框架的 mounted/useEffect 阶段再绑定。
