锚点 Anchor
通过锚点可快速找到信息内容在当前页面的位置。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基本用法：基本用法，随着页面滚动，锚点浮动在页面固定位置。
- 横向 Anchor：横向 Anchor，不支持嵌套
- 静态位置：设置
affix=false不随着页面滚动，锚点处于固定位置。 - 无轴线模式：设置
lineless时，可以使用无左侧轴线的锚点样式。 - 设置锚点滚动偏移量：可以设置
boundary来定制锚点滚动偏移量。 - 点击锚点不记录历史：可以设置点击锚点而不改变浏览器历史。
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
Anchor
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| affix | 是否固定。当设置为 true时，锚点组件将会嵌套在固钉 组件内 | boolean | true | - |
| animation | 是否平滑滚动 | boolean | true | - |
| hash | 是否改变 hash，设置为 false 点击锚点不会改变页面 hash。 | boolean | true | - |
| lineless | 没有左侧轴线的样式。 | boolean | - | - |
| offsetBottom | 距离窗口底部达到指定偏移量后触发。 Affix 固钉组件的 offsetBottom 属性 | number | - | - |
| offsetTop | 距离窗口顶部达到指定偏移量后触发。即 Affix 固钉组件的 offsetTop 属性 | number | - | - |
| targetOffset | 容器中基准线的位置相对容器顶部的偏移量，在没有设置的时候，取值为滚动容器高度的一半。当锚点到达或离开基准线的时候会更新锚点的状态。 | number | - | 2.22.0 |
| boundary | 滚动边界值，设置该值为数字后，将会在距离滚动容器 boundary 距离时停止滚动。设置为 end, start, center，目标元素将会对应滚动到底部，顶部，中间位置。 | number | 'end' | 'start' | 'center' | 'nearest' | start | - |
| direction | 方向 | 'vertical' | 'horizontal' | vertical | 2.51.0 |
| affixStyle | 通过该属性可以设置 Affix 组件的样式 | CSSProperties | - | - |
| className | 节点类名 | string | string[] | - | - |
| scrollContainer | 滚动容器。传入选择器或者dom元素。 | string | HTMLElement | Window | - | - |
| style | 节点样式 | CSSProperties | - | - |
| onChange | 滚动时锚点改变或点击锚点时触发 | (newLink: string, oldLink: string) => void | - | - |
| onSelect | 点击锚点时候触发 | (newLink: string, oldLink: string) => void | - | - |
Anchor.Link
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| href | 锚点链接 | string | # |
| title | 文本内容。可以是字符串或者自定义节点。 | string | ReactNode | - |
| className | 节点类名 | string | string[] | - |
| style | 节点样式 | CSSProperties | - |