Skip to content

Anchor 锚点

xy-anchorxy-anchor-link 用于把“长内容页的章节定位”收口成一套稳定的页内导航。采用复合组件和插槽优先写法,默认支持复合组件和插槽优先写法,默认支持 vertical + horizontal、复合嵌套目录、滚动容器监听、marker 指示条、scrollTo expose 和 URL hash 同步。

基础用法

最常见的接法是左侧一列目录、右侧一列长内容。点击目录后,滚动容器会平滑定位到对应章节。

概览

Anchor 适合承接长内容页的目录导航和章节定位。

使用方式

推荐先从 vertical 单列导航开始,用最小目录把内容结构跑通。

接入建议

标题、段落和说明块本身仍由页面层维护,Anchor 只负责定位和高亮。

自定义滚动容器

当内容不在整页滚动,而是在局部面板里滚动时,可以通过 containeroffsetbound 调整定位和高亮时机。

sticky header / offset = 48

指标区

顶部保留了一条 sticky 工具栏,所以滚动定位需要额外 offset。

任务队列

局部滚动容器里常见的就是一侧目录、一侧长内容。

说明区

bound 可以提前切换高亮,避免目录反馈明显滞后。

Active 变化与点击事件

change 适合回写当前章节状态,click 适合埋点、日志或联动其它说明面板。

当前高亮#anchor-change-intro最近点击-

介绍

change 适合给页面层同步当前章节。

API

click 更适合埋点、日志或侧边联动。

检查项

你可以把 active href 回写到外部状态或 URL。

Horizontal 模式

direction='horizontal' 适合顶部页内导航。首版允许嵌套声明,但视觉保持扁平,不展开二级缩进目录。

概览

horizontal 更适合顶部页内导航、章节切换和长说明页目录。

指标

首版允许嵌套声明,但视觉会保持扁平,不渲染二级缩进。

检查项

适合搭在详情页、运维页或后台说明页的顶部工具区。

嵌套目录

复合嵌套 <xy-anchor-link><xy-anchor-link /></xy-anchor-link> 更适合纵向目录树。父级和子级都能参与 active 命中。

接入指引

父级节点可以自己带 href,也可以只作为层级标题。

接口约定

接口约定、字段映射和事件回调通常是最适合放子级目录的部分。

验证清单

回归验证、联调检查和上线确认也很适合拆成子级锚点。

与 Affix 组合

当目录需要在滚动过程中持续可见时,可以直接和 xy-affix 组合使用。

页面概览

把 Anchor 固定在滚动容器侧边时,目录会一直可见。

风险清单

适合变更中心、发布中心、长详情页这种章节很多的后台页面。

上线检查

和 Affix 组合后,目录不会随着内容滚远。

何时使用

  • 需要给长说明页、详情页、发布清单或配置中心提供稳定的页内目录导航。
  • 需要让目录跟随滚动自动高亮,而不是只做静态跳转链接。
  • 需要目录工作在局部滚动容器内,而不是只能监听整页滚动。

API

Anchor Attributes

属性说明类型默认值
container滚动容器,可传选择器、HTMLElementwindownullAnchorContainernull
offset锚点滚动后的额外偏移距离number0
bound提前触发 active 切换的边界偏移number15
duration平滑滚动时长,单位毫秒number300
marker是否显示 marker 指示条booleantrue
direction导航方向AnchorDirection'vertical'
sync-hash是否在挂载、点击和滚动时同步 URL hashbooleantrue

Anchor Events

事件说明参数
change当前高亮锚点变化时触发AnchorChangeHandler
click点击锚点时触发AnchorClickHandler

Anchor Exposes

暴露项说明类型
scrollTo手动滚动到指定锚点AnchorInstance["scrollTo"]

Anchor Slots

插槽说明
defaultxy-anchor-link 组件列表
属性说明类型默认值
title锚点标题string''
href锚点地址,推荐使用 #section-id 形式string''

行为约定

  • vertical 适合侧边目录和层级导航;horizontal 适合顶部页内导航。
  • horizontal 首版允许嵌套声明,但视觉保持扁平,不渲染二级缩进目录。
  • syncHash=true 时,组件会读取初始 hash,并在点击和滚动切换 active 时用 history.replaceState 同步 URL。
  • syncHash=false 时,只保留滚动和 active 高亮,不读写 URL。
  • 如果 href 对应目标不存在,组件会安全跳过滚动,不抛错。

模式建议

  • vertical:默认模式,优先用于长内容页、配置页、说明页和发布清单。
  • horizontal:适合顶部章节导航、页面内步骤导航或内容页二级导航。
  • Affix + Anchor:适合目录必须持续可见的详情页或控制台页面。