锚点跳转本质是浏览器根据URL中#片段查找匹配id属性的过程；ID不合法、大小写错误、含特殊字符、动态渲染未完成或被SPA框架拦截，均会导致静默失败。
锚点跳转不是“加个 href 就行”，它本质是浏览器根据 URL 中的 # 片段去 DOM 中查找匹配 id 属性的过程；ID 选得不对、写得不规范，或目标元素没在初始 DOM 里，跳转就静默失败——不报错、不滚动、不提示。
为什么 href="#section2" 点了没反应？
绝大多数情况是目标元素压根没被浏览器“看见”：
- 目标写成了
class="section2"或data-id="section2"，但浏览器只认id="section2" -
id值大小写不一致：链接写href="#Section2"，但元素是id="section2"（区分大小写） - ID 含中文、空格或特殊符号，比如
id="第二部分"或id="faq?"，URL 解码后无法匹配 - 页面用 JS 动态渲染内容，点击时目标元素还没插入 DOM，
document.getElementById("section2")返回null
id 属性怎么写才合法且可靠？
不是所有字符串都能当 ID；现代浏览器虽宽松，但兼容性、可维护性和语义清晰度都依赖规范写法：
- 必须以字母开头，不能以数字起始（
id="1-intro"在 IE 和部分旧 Safari 中失效；改用id="intro-1"） - 只用小写字母、数字、短横线
-、下划线_；避免.、:、 - 全页面唯一：两个
id="api"，浏览器只会滚动到第一个 - 语义优先：用
id="installation"比id="sec-3"更易读、更利于 SEO 和无障碍访问
固定头部遮挡目标内容怎么办？
跳转后目标元素顶部被 position: fixed 导航栏盖住，是高频视觉问题。别用 margin-top 推内容——那会破坏布局流，且不影响锚点定位逻辑：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 正确解法是给目标元素加 CSS：
scroll-margin-top: 64px（值等于导航栏高度） - 必须作用于带
id的元素本身，或其最近的可滚动祖先容器 - 兼容性：Chrome 99+、Firefox 97+、Safari 15.4+ 原生支持；IE 和旧 Safari 需回退 JS：
el.scrollIntoView({ block: 'start', behavior: 'smooth' }) - 注意：若父容器有
overflow: hidden或transform，可能截断滚动上下文，导致scroll-margin-top不生效
单页应用（SPA）里锚点失效怎么破？
React Router、Vue Router 等默认拦截所有 # 变化，原生 href="#faq" 被吞掉，既不跳转也不触发路由事件：
- 首选方案：绕过 a 标签，用 JS 主动滚动，例如 React 中
useEffect(() => { ref.current?.scrollIntoView() }, []) - 若需保留语义和外部链接能力（如分享带
#contact的 URL），Vue Router 要设mode: 'hash'，React Router v6+ 用createHashRouter - SSR 场景下，服务端不执行滚动，首次加载
/page#faq不会自动定位；客户端需监听location.hash并手动调用scrollIntoView - 不要在路由守卫中
event.preventDefault()所有 hash 变化——会直接禁掉所有锚点行为
真正麻烦的从来不是“怎么写 href”，而是 ID 是否真实存在、是否唯一、是否在正确上下文中可滚动，以及框架是否悄悄接管了哈希逻辑。这些点漏掉任何一个，页面就只是“看起来能跳”，实际一动不动。
