从目录跳转到具体内容

上周帮朋友调一个文档站，他指着侧边栏目录问我：“为什么我点了‘配置项’这一条，录跳页面直接滑到中间了，具体但地址栏没变？内容刷新一下又回到顶部。”我看了眼代码，从目发现问题不在锚点本身，录跳而在他用scrollIntoView时没处理history。具体这让我想起一个老生常谈但总有人踩坑的内容事——从目录跳转到具体内容，从来不是从目加个id就完事。

最朴素的录跳锚点跳转长这样：

浏览器会把#section2那个元素滚到视口顶部。简单，具体直接，内容但有个副作用：URL会变成example.com/page#section2。从目如果你在单页应用里，录跳路由可能直接崩掉；就算不是具体SPA，用户刷新页面后浏览器会尝试恢复滚动位置，结果有时跳过头，有时被固定导航栏挡住标题。我见过不少文档站，锚点跳过去后标题被吸顶导航遮得严严实实，用户得手动往上滚半屏——这种体验就像开门撞到额头。

固定导航栏的遮挡问题，解法出奇地简单：给目标元素加scroll-margin-top。比如导航栏高60px，就写scroll-margin-top: 80px。浏览器在滚动时会自动留出这段距离。这属性现在支持度很好，比早年用padding-top加负margin的 hack 干净太多。我自己的博客就用了这招，目录跳转后标题刚好落在导航下方，看着舒服。

一个小观察：很多人写锚点跳转时只盯着id和href，却忽略了浏览器默认的滚动行为其实受scroll-behavior影响。加上html { scroll-behavior: smooth; }，跳转就有了平滑动画。但如果你用JS的scrollIntoView，记得传{ behavior: 'smooth' }，否则要么生硬闪过去，要么和CSS设置打架。

再往深一层，单页应用里的目录跳转往往需要拦截默认行为。比如React Router或Vue Router，你写<a href="#section2">，点击后路由会误以为要导航到/section2。这时候得用event.preventDefault()，然后手动document.getElementById('section2').scrollIntoView()。但手动滚动又带来新问题：URL不更新，用户没法复制链接分享。于是又得用history.pushState或replaceState把#section2塞进地址栏。这一套组合拳下来，才算把“跳转”和“可分享”都照顾到。

我最近在做一个技术文档项目，目录是动态生成的，每个标题的id由标题文本slugify而来。中文标题slugify后可能变成空字符串或一堆百分号编码，于是我在生成id时加了个前缀heading-，再拼上索引。这样既避免重复，也绕开了中文编码的坑。跳转时用decodeURIComponent处理一下location.hash，就能准确找到目标。细节虽小，但少了这一步，用户点目录就可能没反应——他们不会报bug，只会觉得“这网站不好用”。

还有个容易被忽视的场景：页面加载时如果URL里带了#section2，浏览器会尝试跳转。但如果目标内容是异步渲染的（比如从API拉取后再插入DOM），浏览器找不着元素，跳转就失败了。我通常会在内容渲染完成后检查location.hash，有的话再手动触发一次滚动。这比让用户刷新页面靠谱得多。

说到底，从目录跳转到具体内容，表面看是几行HTML的事，实际要考虑滚动位置、URL同步、固定导航遮挡、动态内容加载、SPA路由冲突。每一点单独拎出来都不难，凑在一起就变成了“为什么我的锚点有时候灵有时候不灵”。我的习惯是：先写最朴素的<a href="#id">，然后打开DevTools，把视口缩到手机大小，点一遍所有目录项。哪个被导航栏挡住，就加scroll-margin-top；哪个URL变了导致路由异常，就拦截默认行为。测试驱动，比空想靠谱。

最后说个真事：有次我帮人看一个文档站，目录跳转后内容是对了，但侧边栏高亮没跟着变。用户点“第三节”，内容滚到第三节，可目录里“第一节”还亮着。这跟跳转本身无关，是滚动监听没做好。但用户感知到的就是“跳转有问题”。所以啊，跳转从来不是孤立的动作，它和视觉反馈、状态同步绑在一起。把这几件事都捋顺了，目录才真正算“能用”。

(责任编辑：时尚)