跳到正文

锚点

Anchor

初级通用

锚点(Anchor)是页面中可被定位的具体位置,通常配合链接让人跳到某个章节。它解决长页面里查找内容费时的问题:比如从帮助中心的目录直接跳到“退款流程”。

你可能会说:「我想让帮助文档顶部的目录点一下就跳到下面对应的章节,还能把那个位置分享给别人。」

动手看看

帮助中心 / 订单与售后
/help/orders#order
/help/orders#refund
/help/orders#invoice
本文目录
查询订单
退款流程
申请发票
查询订单
进入「我的订单」,选择订单即可查看支付状态、物流进度和收货信息。
章节位置:#order
退款流程
打开订单详情,选择「申请退款」,填写原因并提交。审核通过后,款项原路退回。
章节位置:#refund
申请发票
在已完成订单中选择「申请发票」,填写抬头与邮箱。电子发票开具后将发送至邮箱。
章节位置:#invoice
目标章节

切换「目标章节」,观察正文移动、目录高亮和地址尾部的变化。这里用文档位移模拟点击目录后的页内定位,目录本身只演示悬停与聚焦反馈。

退款流程在同一篇文档的中段。锚点让读者直接定位到这个标题,不必从头翻找,也不是打开一篇新的帮助文章。

要点

  1. 1

    先给目标内容一个位置标识

    我们可以给页面里的某个章节设置唯一标识。目录链接指向这个标识,浏览器就能找到目标并滚动过去。因为链接指的是位置,不是屏幕上的固定坐标,所以前面的内容变长了,目标仍然能被找到。

  2. 2

    目录项和落点要对应起来

    你可以把目录项理解为入口,把章节标识理解为落点。做后台操作手册时,“创建项目”点下去要落在创建项目的章节;如果几个目录项误用了同一个标识,用户就会反复跳到同一处。

  3. 3

    分享链接也能带上落点

    锚点位置可以包含在页面网址中。这样你发给同事的不只是整篇文档,而是其中的“权限设置”一节。检查效果时,除了点目录,也可以直接打开分享链接,看看是否落在预期章节。

容易混淆的地方

锚点说的是同一页面内的目标位置;链接是可点击的入口,它可以指向锚点,也可以指向另一个页面。路由则用来决定展示哪个页面或视图。比如从帮助中心首页进入退款说明,主要是页面导航;进入说明后直达“申请步骤”,才是在用锚点。

什么时候用

适合用

  • 做一篇很长的产品说明页,顶部目录能让读者直接跳到安装、配置或常见问题章节。
  • 在帮助中心分享某个操作步骤时,让链接打开后直接落在那一节,而不是让同事从头找。
  • 做单页官网时,从页头导航跳到同一页面的功能介绍、定价或联系区。

不适合用

  • 用户要从商品列表进入独立的商品详情页时,用指向详情页的链接和对应路由,不需要页内锚点。
  • 用户要提交表单或删除记录时,用按钮触发操作;锚点是定位内容,不负责完成这些动作。
  • 页面只有一小段内容,目标就在眼前时,直接展示内容比额外做一个跳转入口更省事。

练一练

你在做一篇很长的 AI 工具使用指南。用户想把“配置模型密钥”这一节直接发给同事,同时保留顶部目录。哪种做法最合适?

让 AI 帮你做

请给这篇帮助文档加入页内锚点导航:顶部目录分别链接到对应章节,每个章节使用唯一且稳定的位置标识。用户点击目录后能跳到正确章节,复制该章节的链接给别人后,打开也能直接定位到那里。

接下来学什么