最常见的原因是目标元素缺失id属性或id值与href不一致；需检查id是否准确、是否动态插入、是否含空格/中文；SPA中路由拦截导致失效；建议用scrollIntoView()替代并设置scroll-margin-top。
点击 <a> 标签后页面没滚动到目标 ID 是为什么
最常见原因是目标元素缺失 id 属性，或 id 值与 href 中的值不完全一致（大小写、空格、特殊字符都敏感）。浏览器只认原生 id，不认 class 或自定义属性。
检查方法：右键目标元素 → “检查”，确认其确实有形如 id="section-2" 的属性；再核对 <a href="#section-2"> 中的字符串是否一字不差。
- HTML5 允许
id以数字开头，但部分旧版 Safari 会失败，建议始终以字母开头（如id="sec1"） - 若目标元素是动态插入的（如 React/Vue 渲染后），需确保它在点击前已存在于 DOM 中
-
id值中不能含空格或中文（href="#章节一"在多数浏览器中无效）
用 scrollIntoView() 替代原生锚点跳转更可控
原生锚点跳转无法设置缓动、偏移或等待条件，且在单页应用中常因路由拦截失效。用 JavaScript 主动调用 scrollIntoView() 是更稳妥的选择。
示例：
<a href="#" onclick="document.getElementById('faq-3').scrollIntoView({ behavior: 'smooth', block: 'start' }); return false;">跳转到第三条 FAQ</a>
-
behavior: 'smooth'启用平滑滚动（Chrome 61+、Firefox 68+、Safari 15.4+ 支持） -
block: 'start'控制垂直对齐方式（可选'center'或'end'） -
return false阻止默认跳转行为，避免页面闪动或 URL 哈希突变 - 若目标元素可能不存在，先加判空：
if (el) el.scrollIntoView(...)
单页应用（SPA）中哈希跳转失效的典型场景
Vue Router 或 React Router 默认会拦截 #xxx 并触发路由更新，导致原生锚点滚动被跳过。这不是 bug，而是框架主动接管了哈希变化。
- Vue Router：启用
scrollBehavior并手动处理哈希（需解析to.hash并调用el.scrollIntoView()） - React Router v6：不再自动响应哈希，需在组件内监听
useLocation().hash变化并执行滚动 - 通用兜底：在
useEffect或mounted钩子中，延时 1 帧再执行scrollIntoView()（setTimeout(() => ..., 0)），确保 DOM 已就绪
移动端 Safari 对锚点滚动的兼容性陷阱
iOS 15.4 之前，scrollIntoView({ behavior: 'smooth' }) 在 Safari 中完全不生效；即使现在支持，也常因 position: fixed/sticky 父容器导致偏移错乱。
- 检测是否支持平滑滚动：
'scrollBehavior' in document.documentElement.style - 不支持时降级为
behavior: 'auto'（瞬间跳转）或用window.scrollTo()+requestAnimationFrame手写缓动 - 若页面顶部有吸顶导航栏，务必设置
scroll-margin-top（如scroll-margin-top: 64px），否则目标元素会被遮挡 - Safari 对
id大小写极其敏感，href="#Contact"和id="contact"不匹配
