最常见原因是目标元素缺失id属性或id值与href不一致；必须确保目标元素存在且id值完全匹配，大小写、空格、特殊字符均敏感，浏览器静默失败不报错。
点击 @#@#@#@#@#@#@#@#@#@0 中的 #section2 与 id 值完全一致
class 或其他属性替代 id —— href 锚点只认 id
id：HTML 规范要求 id 全局唯一，重复会导致行为不可预测
scrollIntoView() 比原生锚点跳转更可控
原生 <a href="#xxx"></a> 跳转会触发整个页面滚动，无法设置缓动、偏移或回调。遇到导航栏遮挡标题、需要平滑滚动、或想在滚动后执行 JS 时，应改用 scrollIntoView()。
示例（带偏移和动画）：
document.querySelector('a[href^="#"]').addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').slice(1);
const el = document.getElementById(targetId);
if (el) {
el.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
// 可在此处加 URL hash 更新或分析上报
history.replaceState(null, '', '#' + targetId);
}
});
注意：scrollIntoView() 不会自动更新地址栏 hash，需手动调用 history.replaceState 或 location.hash 同步。
固定头部导航下锚点定位被遮挡怎么办
当页面有 position: fixed 的顶部导航栏时，scrollIntoView() 或原生锚点会让目标元素紧贴视口顶部，结果被导航栏盖住。
解决方法是给目标元素加 scroll-margin-top（推荐）或用 JS 计算偏移：
- CSS 方案（简洁可靠）：
#section2 { scroll-margin-top: 60px; }，值等于导航栏高度 - 兼容性注意：IE 不支持
scroll-margin-top，旧项目需回退到 JS 方案 - JS 回退方案：滚动前用
window.scrollTo({ top: el.offsetTop - 60 })替代scrollIntoView
SPA 中路由变化但锚点不生效的典型场景
React/Vue 等单页应用里，router.push('/page#section3') 可能不触发滚动，因为框架默认忽略 hash 变化，或组件未重新挂载。
关键点：
- Vue Router：启用
scrollBehavior并显式处理 hash，例如：if (to.hash) return { el: to.hash } - React Router v6：需在组件内监听
useLocation().hash，并在useEffect中调用document.querySelector(hash)?.scrollIntoView() - 避免在异步加载的内容中直接写
id—— 若 DOM 尚未渲染，getElementById返回null
锚点不是“设了就灵”的功能，它依赖 DOM 存在、CSS 渲染状态、以及路由系统是否真正触发了滚动逻辑。任何一环延迟或拦截，都会让跳转看起来“失效”。
