# 锚点 用于快速跳转到页面的指定位置。 在各个页面分区之间跳转，当平铺呈现的内容过长时使用。 例：Universe Design 官网开发文档的信息模块过多，用锚点导航便于用户快速定位。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/b4943fd80892604eacf1260c193add9f_TpWHOpiZMp.png?height=1094&lazyload=true&maxWidth=800&width=2048) ## 使用规则 当同一页面的纵向信息有多个模块且展示超出一屏时，推荐使用锚点便于用户快速查看。 区别于导航菜单、页签，锚点不适用于全局导航，仅适用于页内导航。 ## 组成要素 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/1e04f3ad10a21c2236c32d37520252a8_1R3wPZoz9f.png?height=432&lazyload=true&maxWidth=800&width=2048) 1. **纵向定位线（可选）**： 用于图形化辅助提示当前位置 1. 选中态定位线 1. 定位线背景 1. **模块名称** ： 每个模块的标题文本 ## 控件类型 ### 类型总览 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/0fa729d0a0ea33860e594279f7ad832d_aRudI0FlUS.png?height=818&lazyload=true&maxWidth=800&width=2048) - **标准锚点导航：** 多用于页面中各个纵向信息模块均为平级，如官网简介等。 - **层级锚点导航：** 若页面中纵向信息模块有层级的区别，如文档等。 - **是否带定位线：** 可根据不同要求各自取用，以下分类准则仅为参考。 - 根据类型决定：类似文章目录这类可能会出现多个信息模块的页面，建议使用无定位线锚点。 - 根据信息模块数量确定：若可以确定信息类别的数量在 2-7 个左右，建议使用有定位线锚点。 ### 通用规则样式 #### 尺寸说明 - 锚点应用场景较为固定，建议标题 **14px**。 - 锚点区域宽度建议 **200px**，最宽不超过 **400px**。可根据标题普遍长度自定义。 - 锚点组件距离页面其他元素的最小边距为 **24px**，如需调整应满足 4N 原则（指设计或开发中，调整数值应是 4 的倍数）。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f66027084db8e4976a7dcf60729d34d5_Qdo6gCugn4.png?height=552&lazyload=true&maxWidth=800&width=1852) #### 状态说明 锚点通常有Normal、Hover、Press、Selected、Loading failure五个状态。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/82a5d4495ed9729ad52c5b3feba06f6c_cFJttgYUHP.png?height=400&lazyload=true&maxWidth=800&width=2048) ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/beae32329cbb50d02f9cd69b95848197_L12kmeFmcy.png?height=560&lazyload=true&maxWidth=800&width=2048) **注意事项**：#### 超长处理 - 标题展示不全时，省略超出部分 Hover 不展示全部标题。可酌情考虑增加 Hover 展示全部标题。 - 标题数量过多时，出现滚动条 Scrollbar，滚动展示全部，高度最高可撑满页面高度。 - 初始进入页面时，未加载完毕时组件容器区域出现加 Spin。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/037204d1d19a2598f95dbc6f923762f4_NEv27DuBJn.png?height=560&lazyload=true&maxWidth=800&width=2048) #### 控件位置 - 一般建议位于页面内部左侧位置。 - 当左侧有菜单导航或顶部有 Tab 栏时，建议将锚点导航放置于页面右侧。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/b4943fd80892604eacf1260c193add9f_0R6ckthFeA.png?height=1094&lazyload=true&width=2048) | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/e09754401b8b247c7863a437fd1bfc97_9dlkEkMnHy.png?height=1094&lazyload=true&width=2048) ---|--- ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f280964f6dabb16bf6ea6801799276a3_3hYp5rFRao.png?height=20&lazyload=true&width=800)
**正确：**
锚点导航放在页面右侧，正文处于页面中部。 | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/5d576ae0cad45457a2c92e8b32194543_EWbyDet7Zc.png?height=20&lazyload=true&width=800)
**避免：**
锚点导航放在正文左侧，正文过于靠右。 #### 滚动位置说明 常见的锚点组件有两种滚动位置情况分类，可分为常规和静态型。 **常规型：** 随着页面滚动，锚点浮动在页面固定位置 推荐使用该种交互方式 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/8e07341ffecfc73db6b0db7565c120b0_MDEash2GpL.png?height=580&lazyload=true&maxWidth=800&width=2048)
**静态型：** 固定于指定位置，滚动时位置不发生改变 当锚点导航数量较少时，或应用于局部页面或弹窗等情况建议使用 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/009b0726c33716ef734e09c3d5c6dc15_LjQedUq5c7.png?height=580&lazyload=true&maxWidth=800&width=2048) #### 响应式说明 锚点尺寸固定，不随页面适配发生变化。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/812f3ad4bb3c96e06d360bbba598bcc6_3mud1TDJWQ.png?height=864&lazyload=true&maxWidth=800&width=2048) ### 锚点 Anchor 和步骤条 Steps 对比 - **锚点 Anchor：** 信息模块均为展示信息，仅用于快速定位位置。 - **步骤条 Steps：** 提供完整清晰的步骤引导，同时展示该信息模块是否已完成、待完成。 如该图，该场景应使用步骤条的样式。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/abf3d9b7ff6ad599b02f965677cefa57_K8dh5Rge0w.png?height=1116&lazyload=true&maxWidth=800&maxWidth=800&width=2048)