2016-10-28 14:02:55 +08:00
---
category: Components
title: Anchor
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original
2022-11-17 18:28:13 +08:00
demo:
2022-11-09 12:28:04 +08:00
group:
2022-11-17 16:49:09 +08:00
title: Navigation
order: 3
2016-10-28 14:02:55 +08:00
---
2016-11-09 21:06:43 +08:00
Hyperlinks to scroll on one page.
2016-10-28 14:02:55 +08:00
## When To Use
2016-11-29 17:13:24 +08:00
For displaying anchor hyperlinks on page and jumping between them.
2016-10-28 14:02:55 +08:00
2022-10-31 14:49:43 +08:00
> Notes for developers
>
> After version `4.24.0`, we rewrite Anchor use FC, Some methods of obtaining `ref` and calling internal instance methods will invalid.
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-12-12 19:44:32 +08:00
< code src = "./demo/basic.tsx" iframe = "200" > Basic< / code >
2022-12-27 17:14:35 +08:00
< code src = "./demo/horizontal.tsx" iframe = "200" > Horizontal Anchor< / code >
< code src = "./demo/static.tsx" > Static Anchor< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/onClick.tsx" > Customize the onClick event< / code >
< code src = "./demo/customizeHighlight.tsx" > Customize the anchor highlight< / code >
2022-12-12 19:44:32 +08:00
< code src = "./demo/targetOffset.tsx" iframe = "200" > Set Anchor scroll offset< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/onChange.tsx" > Listening for anchor link change< / code >
2022-11-30 15:55:43 +08:00
< code src = "./demo/legacy-anchor.tsx" debug > Deprecated JSX demo< / code >
2022-11-09 12:28:04 +08:00
2016-10-28 14:02:55 +08:00
## API
2016-11-03 16:45:13 +08:00
### Anchor Props
2022-11-17 17:31:26 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| affix | Fixed mode of Anchor | boolean | true | |
| bounds | Bounding distance of anchor area | number | 5 | |
| getContainer | Scrolling container | () => HTMLElement | () => window | |
| getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - | |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
2022-12-13 22:18:43 +08:00
| showInkInFixed | Whether show ink-square when `affix={false}` | boolean | false | |
2022-12-22 14:12:26 +08:00
| targetOffset | Anchor scroll offset, default as `offsetTop` , [example ](#components-anchor-demo-targetoffset ) | number | - | |
2022-11-17 17:31:26 +08:00
| onChange | Listening for anchor link change | (currentActiveLink: string) => void | | |
2022-12-06 18:18:38 +08:00
| onClick | Set the handler to handle `click` event | (e: MouseEvent, link: object) => void | - | |
2022-12-27 17:14:35 +08:00
| items | Data configuration option content, support nesting through children | { key, href, title, target, children }\[] [see ](#anchoritem ) | - | 5.1.0 |
| direction | Set Anchor direction | `vertical` \| `horizontal` | `vertical` | 5.2.0 |
### AnchorItem
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| key | The unique identifier of the Anchor Link | string \| number | - | |
| href | The target of hyperlink | string | | |
| target | Specifies where to display the linked URL | string | | |
| title | The content of hyperlink | ReactNode | | |
| children | Nested Anchor Link, `Attention: This attribute does not support horizontal orientation` | [AnchorItem ](#anchoritem )\[] | - | |
2016-11-03 16:45:13 +08:00
2016-11-07 11:04:36 +08:00
### Link Props
2016-10-28 14:02:55 +08:00
2022-12-27 17:14:35 +08:00
We recommend using the items form instead.
2022-03-31 11:17:17 +08:00
| Property | Description | Type | Default | Version |
| -------- | ----------------------------------------- | --------- | ------- | ------- |
| href | The target of hyperlink | string | | |
| target | Specifies where to display the linked URL | string | | |
| title | The content of hyperlink | ReactNode | | |
