目录标题跳转内容，目录核心就一句话：给标题一个身份证，标题再给跳转按钮一个指向这个身份证的跳转箭头。HTML里身份证叫id，内容箭头叫href="#id值"。目录就这么简单，标题但很多人栽在细节上。跳转

去年我帮朋友改一个产品说明书网页，内容他折腾了两小时没搞定。目录我打开源码一看，标题目录里写的跳转是<a href="#section1">第一章</a>，正文标题也确实有<h2 id="section1">。内容表面看没毛病，目录但点击就是标题没反应。问题出在哪？跳转他页面里有个隐藏的弹窗组件，也用了id="section1"。浏览器遇到重复id，直接蒙圈，跳转失效。这种坑，光看代码逻辑根本发现不了，得实际点一遍才知道。

写跳转链接时，href的值必须带#，这是锚点标记。而目标标题的id值不能带#，也不能带空格。有些人习惯性写id="section 1"，空格在URL里会被解析成%20，浏览器找不到对应元素。要么用连字符section-1，要么用下划线section_1，别用空格。

还有个常见误区：很多人以为只有<a>标签能做跳转目标。实际上任何HTML元素都能加id，比如<div id="part2">、<p id="note">。跳转过去后，浏览器会把该元素滚动到视口顶部。但这里有个体验细节——如果目标元素离页面顶部太近，或者被固定导航栏遮挡，跳转后标题可能被盖住一半。解决办法是给目标元素加scroll-margin-top: 80px;，或者用scroll-behavior: smooth;让滚动更顺滑。

我见过最离谱的写法是把跳转链接直接包在标题里，像<h2><a href="#content">标题</a></h2>。这种嵌套本身没问题，但如果你在目录里也用了同样的标题文字，点击目录跳转后，用户视觉焦点会落在标题上，而标题本身又是个链接，鼠标移上去显示小手，用户可能误点，又跳回目录。这在长文档里特别烦人。我的习惯是：目录用<a>，正文标题保持纯文本，不加链接。

动态生成内容时更要注意。比如用JavaScript渲染列表，每个条目都带id，如果数据是从数据库来的，id可能是中文、数字开头或者带特殊符号。数字开头的id在HTML5里合法，但老浏览器可能不认。稳妥做法是加个前缀，比如id="item-${ data.id}"。还有种情况是页面用框架（如Vue、React），组件渲染完成后id才存在，如果跳转逻辑在数据加载前执行，会报错找不到目标。这时候得用nextTick或者在路由切换后延迟执行跳转。

最后说个冷门但实用的技巧。如果你想让跳转后地址栏的URL也变化（方便复制分享），可以用history.pushState配合锚点操作。但别滥用，纯文档页面不需要这个功能，反而增加复杂度。多数场景下，老老实实写<a href="#xxx">就够了。

记住，跳转失败九成是id冲突或id值不合法，剩下的是样式遮挡。下次遇到问题，先按F12打开控制台，输入document.getElementById('你的id')，返回null就是id不存在，返回元素就是被其他东西干扰了。对症下药，比瞎猜快得多。