界面与交互 · 导航结构

锚点导航Anchor

用页内锚点把目录项和正文章节用唯一 id 绑定：点目录项把对应节滚到视口并高亮、滚动正文时目录激活项反向跟随（scrollspy），窄屏把目录折叠但保留当前位置与跳转入口。

组件发布指南：点目录定位、滚动反向激活

亲手点目录项、滚动正文、切窄屏目录、复制本节链接——看目录激活项、正文标题高亮和阅读指示如何一起变，失效链接如何保留位置。

第 0 步：这是一篇「组件发布指南」，右侧是页内目录。点目录项（或「已移除章节」）看正文如何滚动定位、目录项如何激活；在正文区用滚轮或拖动滚动条，看目录激活项反向跟随（scrollspy）；切到窄屏折叠目录、再点红色主操作「复制本节链接」——四处结果都长在物件上。

本指南说明如何把组件从开发分支发布到内部 registry，适用于对版本号、changelog 与回滚节奏都有明确要求的团队。

先看适用范围与发布节奏，再按安装、用法的顺序操作；遇到偏差去常见问题里找对应处理路径。

确认本地分支已同步主干，package.json 的版本号与 changelog 已更新到本次要发布的版本。

运行 npm run test 与 npm run build 通过后再进入下一步，避免把未通过的产物推到 registry。

执行 npm publish 把组件推到 registry；发布完成后在示例项目里安装并验证关键交互是否正常。

通过后通知发布群，并归档本次版本对应的 release note，让回滚有据可查。

版本号冲突：先确认 registry 是否已有同号，必要时把补丁号 +1 再发布。

registry 同步延迟：等待约 1 分钟后重试安装；仍失败时查 CI 日志定位原因。需要回滚时用 npm dist-tag 把 latest 指回上一稳定版本并公告。

当前阅读概览正文标题已墨色高亮

对照：当前阅读到「概览」——目录里「概览」带墨色竖条与加粗（aria-current），正文「概览」标题墨色高亮，阅读指示也是「概览」。原因：页面打开时默认把第一节标记为当前，让用户立刻知道自己在哪。下一步：点目录里「用法」看正文如何滚到该节，或直接在正文区滚动看目录激活项反向跟随。

把刚才在实验台上看到的现象命名为六条规则。

点击 = 平滑定位：点目录项按唯一 id 把对应节带到视口顶部（平滑滚动），结果落在正文滚动位置上，不只是 URL 换 hash。
当前项激活：当前节对应的目录项用 aria-current="location" + 墨色左竖条 + 加粗；形状（实心 / 描边）也能区分，不只靠颜色。
scrollspy 反向激活：手动滚动正文时，按哪节最靠近视口顶部反算当前节，目录激活项和阅读指示跟着移——用户不点也能知道在读哪。
目标标题高亮：当前节标题墨色加粗并带标记，让「定位到了」这件事在正文物件上看得到，与目录激活项互为印证。
失效链接不甩顶：id 不存在时保留当前位置并说明，而不是静默跳回页首——避免用户突然丢失阅读进度。
窄屏折叠目录：目录收成「当前：X」一条，展开后仍能跳转；当前位置始终可见，不因折叠而丢失。

从内容结构判断，而不是「长页面就加目录」。

适合

一页里有多个并列章节、用户可能直跳某节：产品文档、帮助中心、长篇教程、API 说明、FAQ。配合 scrollspy 让用户始终知道在读哪一节。

先别用

一屏放得下的短页（直接铺开）；强线性流程（→ steps）；站点级跨页路径（→ breadcrumb）；需要跳过重复导航（→ skip-link，而非章节锚点）。

一次到位的实现顺序。

给每节唯一 id：正文章节加 id；目录项 href=#该id，确保一一对应、不重复。
点击平滑定位：拦截目录项点击，用 scrollIntoView({ behavior: "smooth", block: "start" }) 或容器 scrollTo 把节带到顶部；尊重 prefers-reduced-motion。
接入 scrollspy：用 IntersectionObserver（root 设为滚动容器）或 scroll 事件，算出当前最靠近视口顶部的节。
标记当前项：给当前目录项设 aria-current="location"，同时高亮当前节标题，三处（目录 / 正文 / 阅读指示）同步。
窄屏折叠：小屏把目录收成 details 或下拉，summary 写明「当前：X」，展开后保持跳转能力。
失效与可分享：目标缺失时保留位置 + 反馈；锚点链接写入 URL（#id），刷新或分享能回到同一节。

目标都是用目录跳到「用法」节。差别只在 id 唯一、scrollspy、失效反馈是否守规则。

正例

目录「用法」href=#usage 与正文 id="usage" 唯一对应；点击平滑滚到该节并高亮标题；滚动正文时目录激活项跟着移；「已移除章节」点了保留位置并说明；窄屏目录折叠为「当前：用法」。

用户随时知道在读哪、能跳到哪；失效不丢进度。

反例

目录 href 与正文 id 对不上（或多个节重复 id）；点击只换 URL hash 不滚动；没有 scrollspy，滚动后目录还停在第一节；失效链接静默跳回页首；窄屏直接把目录删掉。

用户不知道点没点中、现在读到哪、还能不能跳。

用户在你的长文目录里点「常见问题」，正文却纹丝不动、目录项也没高亮。最可能的根因是什么？

术语的技术定义和行为以这些一手或权威资料为准。

和本知识点经常一起出现的概念。