HTML锚点跳转需目标元素有唯一合法id且链接href匹配，如；配合scroll-behavior: smooth和scroll-margin-top可实现平滑滚动并避开固定头部；SPA中需用路由API或scrollIntoView替代原生跳转。
HTML 中的 a 标签实现锚点跳转，核心就两点：目标元素要有合法 id，链接的 href 要写对带 # 的值。不复杂，但细节容易出错。
给目标位置加 id 属性
锚点跳转靠的是 DOM 元素的 id 值匹配，不是 class、data-id 或其他属性。必须手动添加，且确保唯一。
- 选一个语义清晰、不含空格和特殊符号的值，比如
id="faq-install"，避免id="1-step"（数字开头在旧浏览器可能失效） - 加在你想滚动停住的元素上，通常是标题或内容容器：
<h2 id="troubleshooting">常见问题</h2> - 同一页面不能有重复
id，否则点击只会跳到第一个匹配项
用 a 标签链接到这个 id
在任意位置写一个 a 标签，href 值为 # 加上刚才设置的 id 名称。
- 跳转到本页某处：
<a href="#troubleshooting">查看常见问题</a> - 跳转到其他页面的某处：
<a href="help.html#troubleshoot">帮助文档中的故障排查</a> - 如果链接无反应，先检查控制台是否报错——大概率是目标
id拼写错误、缺失，或被 JS 动态移除了
让滚动更友好：平滑 + 避开固定头部
默认跳转是瞬时滚动，顶部常被固定导航栏遮挡。两行 CSS 就能解决：
立即学习“前端免费学习笔记（深入）”；
- 启用平滑滚动：
html { scroll-behavior: smooth; } - 预留顶部间距（适配固定 header）：
h2[id] { scroll-margin-top: 64px; }，数值按实际头部高度调整 - 这两个属性现代浏览器（Chrome 99+、Firefox 97+、Safari 15.4+）原生支持，无需 JS
单页应用（SPA）中注意路由拦截
Vue Router（history 模式）或 React Router v6 默认会捕获 #xxx 变更并阻止原生跳转，导致点击没反应。
- 方案一：改用框架提供的编程式导航，如
router.push({ hash: '#section' }) - 方案二：监听点击事件，调用
element.scrollIntoView({ behavior: 'smooth' })手动滚动 - 不建议强行禁用路由拦截，易引发状态不一致
