纯html锚点跳转无需javascript，仅需href="#id"链接匹配页面内唯一id元素；常见失效原因包括id重复、大小写不一致、空格/特殊字符、使用class或name替代id，以及目标元素被隐藏或缺少scroll-margin-top适配固定头部。
锚点跳转在 index.html 里完全不需要 JavaScript，纯 HTML 就能搞定，但容易因 ID 重复、大小写不一致或 URL 编码问题失效。
锚点链接必须用 id，不能用 name
HTML5 已废弃 name 属性做锚点（如 @#@#@#@#@#@#@#@#@#@0，不是 href="about" 或 href="/#about"（后者可能触发整页刷新）。
使用场景注意：
- 同一页面跳转：用
#about - 跨页面跳转：用
other.html#contact，前提是other.html确实有id="contact" - 动态生成内容（如 Vue/React 渲染后才挂载的 DOM）：确保目标元素已渲染完成再跳转，否则滚动无效
跳转后页面没滚动到目标位置？检查这三点
即使链接和 ID 都对，也可能卡在顶部——本质是浏览器找不到可滚动的“锚定元素”或样式干扰了定位。
排查要点：
- 目标元素是否被
display: none或visibility: hidden隐藏？隐藏元素无法成为锚点目标 - 是否设置了
scroll-margin-top？比如固定导航栏遮挡标题，加h2[id] { scroll-margin-top: 80px; }可微调落点 - 页面是否启用了
scroll-behavior: smooth？它不影响跳转有效性，但缺失时跳转会生硬；加在html或body上即可
最简可行示例：@#@#@#@#@#@#@#@#@#@1 对应 <section id="features"><h2>功能</h2></section>。ID 冲突、大小写、CSS 隐藏，这三处占了 90% 的实际失败原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
