Anchor

By the Anchor can quickly find the information content of the current page.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Basic usage. The anchor will be fixed on the page as the page scrolls.
Horizontal Anchor: Horizontal Anchor, does not support nesting
Static: Setting affix=false, the anchor is on a fixed position and does't scroll with the page.
Lineless mode: Use lineless=true to hide axis line on the left.
Scroll boundary: Use boundary to customize the scrolling offset of the anchor.
Hash mode: Click anchor without changing the browser history.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Anchor

Property	Description	Type	DefaultValue	Version
affix	Whether to wrap anchor within Affix	boolean	`true`	-
animation	Whether to enable smooth scrolling	boolean	`true`	-
hash	Whether to change the URL hash	boolean	`true`	-
lineless	Whether to hide axis line of the left	boolean	`-`	-
offsetBottom	Offset from the bottom of the viewport (in pixels). i.e. `Affix`'s `offsetBottom` props	number	`-`	-
offsetTop	Offset from the top of the viewport (in pixels). i.e. `Affix`'s `offsetTop` props	number	`-`	-
targetOffset	The offset of the baseline relative to the top of the container.The value is half of the height of the scrolling container if not specified.The status of the anchor will be updated when the anchor reaches or leaves the baseline.	number	`-`	2.22.0
boundary	Scrolling boundary.For number values, the target element stops scrolling when reaches the bounding distance.For `end`, `start`, `center`, the target scrolls to the bottom, top, and center of the container.	number \| 'end' \| 'start' \| 'center' \| 'nearest'	`start`	-
direction	Direction	'vertical' \| 'horizontal'	`vertical`	2.51.0
affixStyle	The style to be applied to `Affix`	CSSProperties	`-`	-
className	Additional css class	string \| string[]	`-`	-
scrollContainer	Scrolling container. Pass in selector or DOM Element	string \| HTMLElement \| Window	`-`	-
style	Additional style	CSSProperties	`-`	-
onChange	Callback fired when anchor state changes	(newLink: string, oldLink: string) => void	`-`	-
onSelect	Callback fired when anchor is clicked	(newLink: string, oldLink: string) => void	`-`	-

Anchor.Link

Property	Description	Type	DefaultValue
href	The target that the hyperlink points to	string	`#`
title	The content of the hyperlink	string \| ReactNode	`-`
className	Additional css class	string \| string[]	`-`
style	Additional style	CSSProperties	`-`