内容摘要：跳转到页面锚点的核心代码就一行：<a href="#锚点名">链接文字</a>。目标位置写<id="锚点名">。没了。就这么简单。 但真用起来，坑比想象中多。我去年

跳转到页面锚点的表示核心代码就一行：<a href="#锚点名">链接文字</a>。目标位置写<id="锚点名">。跳转没了。到页的代就这么简单。面的锚点码

但真用起来，表示坑比想象中多。跳转我去年给一个长文档站做目录，到页的代写了十几个锚点，面的锚点码测试时点击都正常。表示结果用户反馈“点了没反应”。跳转排查半天——页面用了scroll-behavior: smooth，到页的代但某个锚点目标元素是面的锚点码display: none的折叠面板。浏览器找不到可滚动位置，表示直接忽略。跳转所以锚点目标必须是到页的代渲染出来的、有实际高度的元素。隐藏元素上挂id，等于白挂。

另一个常见问题是固定导航栏遮挡。锚点跳转后，目标内容顶到视口最上方，但你的页面顶部有个60px高的固定菜单，正好盖住标题。用户看到的是标题下方的内容，以为跳错了。解决办法是给目标元素加scroll-margin-top: 70px，或者用CSS伪元素做个偏移占位。我习惯直接写scroll-margin-top，干净，不用改HTML结构。

还有个细节容易被忽略：锚点id不能以数字开头。HTML5放宽了限制，但老浏览器和某些解析器不认。我见过同事写<a href="#1-章节">，Chrome能跳，IE直接白屏。保险起见，id里别用纯数字开头，用sec-1这种前缀。

如果页面是单页应用，路由切换后锚点会失效。Vue或React里，你得在路由变化后手动调用scrollIntoView()。这时候href="#锚点"反而会干扰路由，不如直接用JS：document.getElementById('target').scrollIntoView({ behavior: 'smooth'})。纯静态页面用href，动态页面用JS，别混着来。

最后说个冷门的——锚点跳转后浏览器的历史记录会多一条。用户点锚点，再点返回，不会回到上一页，而是回到锚点前的滚动位置。这很反直觉。如果你不想这样，用history.replaceState替换当前记录，或者干脆用scrollIntoView不改变URL。看场景，文档站保留历史方便用户回跳，但产品页可能不需要。

总结一下我的实践：静态页面，直接href="#id"加scroll-margin-top。动态页面，用scrollIntoView加preventDefault。目标元素必须是可见的、有尺寸的。id命名用字母开头。就这些，够用了。