纯HTML锚点跳转无需JavaScript，仅需href="#id"链接匹配页面内唯一id元素；常见失效原因包括ID重复、大小写不一致、空格/特殊字符、使用class或name替代id，以及目标元素被隐藏或缺少scroll-margin-top适配固定头部。
锚点跳转在 index.html 里完全不需要 JavaScript，纯 HTML 就能搞定，但容易因 ID 重复、大小写不一致或 URL 编码问题失效。
锚点链接必须用 id，不能用 name
HTML5 已废弃 name 属性做锚点（如 <a name="section1"></a>），现代写法只认 id。浏览器会把 URL 中 #xxx 后的部分，去匹配页面内第一个同名 id 的元素。
常见错误：
- 写成
class="section1"或data-id="section1"—— 浏览器直接忽略 - ID 带空格或特殊字符，比如
id="my section"→ 应改为id="my-section" - 大小写混用：
#Section1链接 vsid="section1"元素 → 不匹配（ID 匹配区分大小写）
a 标签的 href 必须带 #，且指向存在 ID
链接写法必须是 <a href="#about">关于我</a>，不是 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上即可
最简可行示例：<a href="#features">功能介绍</a> 对应 <section id="features"><h2>功能</h2></section>。ID 冲突、大小写、CSS 隐藏，这三处占了 90% 的实际失败原因。
