锚点
Anchor
初级通用锚点(Anchor)是页面中可被定位的具体位置,通常配合链接让人跳到某个章节。它解决长页面里查找内容费时的问题:比如从帮助中心的目录直接跳到“退款流程”。
你可能会说:「我想让帮助文档顶部的目录点一下就跳到下面对应的章节,还能把那个位置分享给别人。」
动手看看帮助文档的章节定位
帮助中心 / 订单与售后
/help/orders#refund
本文目录
查询订单
退款流程
申请发票
目标章节
切换「目标章节」,观察正文移动、目录高亮和地址尾部的变化。这里用文档位移模拟点击目录后的页内定位,目录本身只演示悬停与聚焦反馈。
退款流程在同一篇文档的中段。锚点让读者直接定位到这个标题,不必从头翻找,也不是打开一篇新的帮助文章。
要点锚点是怎么把人带到指定位置的?
- 1
先给目标内容一个位置标识
我们可以给页面里的某个章节设置唯一标识。目录链接指向这个标识,浏览器就能找到目标并滚动过去。因为链接指的是位置,不是屏幕上的固定坐标,所以前面的内容变长了,目标仍然能被找到。
- 2
目录项和落点要对应起来
你可以把目录项理解为入口,把章节标识理解为落点。做后台操作手册时,“创建项目”点下去要落在创建项目的章节;如果几个目录项误用了同一个标识,用户就会反复跳到同一处。
- 3
分享链接也能带上落点
锚点位置可以包含在页面网址中。这样你发给同事的不只是整篇文档,而是其中的“权限设置”一节。检查效果时,除了点目录,也可以直接打开分享链接,看看是否落在预期章节。
容易混淆的地方
锚点说的是同一页面内的目标位置;链接是可点击的入口,它可以指向锚点,也可以指向另一个页面。路由则用来决定展示哪个页面或视图。比如从帮助中心首页进入退款说明,主要是页面导航;进入说明后直达“申请步骤”,才是在用锚点。
什么时候用
适合用
- 做一篇很长的产品说明页,顶部目录能让读者直接跳到安装、配置或常见问题章节。
- 在帮助中心分享某个操作步骤时,让链接打开后直接落在那一节,而不是让同事从头找。
- 做单页官网时,从页头导航跳到同一页面的功能介绍、定价或联系区。
不适合用
- 用户要从商品列表进入独立的商品详情页时,用指向详情页的链接和对应路由,不需要页内锚点。
- 用户要提交表单或删除记录时,用按钮触发操作;锚点是定位内容,不负责完成这些动作。
- 页面只有一小段内容,目标就在眼前时,直接展示内容比额外做一个跳转入口更省事。
练一练选一个答案,看看解释
你在做一篇很长的 AI 工具使用指南。用户想把“配置模型密钥”这一节直接发给同事,同时保留顶部目录。哪种做法最合适?
让 AI 帮你做复制给 AI Agent 直接用
请给这篇帮助文档加入页内锚点导航:顶部目录分别链接到对应章节,每个章节使用唯一且稳定的位置标识。用户点击目录后能跳到正确章节,复制该章节的链接给别人后,打开也能直接定位到那里。