Anchor
Hyperlinks to scroll on one page.
When To Use
For displaying anchor hyperlinks on page and jumping between them.
Notes for developers
After version
4.24.0, we rewrite Anchor use FC, Some methods of obtainingrefand calling internal instance methods will invalid.
Examples
-
Basic ·
basic -
Horizontal Anchor ·
horizontal -
Static Anchor ·
static -
Customize the onClick event ·
onClick -
Customize the anchor highlight ·
customizeHighlight -
Set Anchor scroll offset ·
targetOffset -
Listening for anchor link change ·
onChange -
Replace href in history ·
replace -
Custom semantic dom styling ·
style-class
API
Common props ref：Common props
Anchor Props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| affix | Fixed mode of Anchor | boolean | Omit<AffixProps, 'offsetTop' | 'target' | 'children'> | true | object: 5.19.0 | × |
| bounds | Bounding distance of anchor area | number | 5 | × | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| 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 | × | |
| showInkInFixed | Whether show ink-square when affix={false} | boolean | false | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| targetOffset | Anchor scroll offset, default as offsetTop, example | number | - | × | |
| onChange | Listening for anchor link change | (currentActiveLink: string) => void | - | × | |
| onClick | Set the handler to handle click event | (e: MouseEvent, link: object) => void | - | × | |
| items | Data configuration option content, support nesting through children | { key, href, title, target, children }[] see | - | 5.1.0 | × |
| direction | Set Anchor direction | vertical | horizontal | vertical | 5.2.0 | × |
| replace | Replace items' href in browser history instead of pushing it | boolean | false | 5.7.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[] | - | |
| replace | Replace item href in browser history instead of pushing it | boolean | false | 5.7.0 |
| targetOffset | Customize scroll offset for this anchor link. It takes precedence over the targetOffset prop of the Anchor component | number | - | 6.4.0 |
Link Props
We recommend using the items form instead.
| 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 | - | |
| targetOffset | Customize scroll offset for this anchor link. It takes precedence over the targetOffset prop of the Anchor component | number | - | 6.4.0 |
Semantic DOM
| Semantic node | Native description | Version |
|---|---|---|
root | Root element with layout positioning, padding, margin, background color and other basic styles | 6.0.0 |
item | Link item element with padding, text color, hover states, transition animations and other styles | 6.0.0 |
itemTitle | Title text element with font styles, color changes, text decoration, transition effects and other styles | 6.0.0 |
indicator | Indicator element with width, height, background color, position changes, transition animations and other styles | 6.0.0 |
Semantic description source: vendor/components/anchor/demo/_semantic.tsx
Design Token
Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.
| Token | Type | Native description |
|---|---|---|
linkPaddingBlock | number | Vertical padding of link |
linkPaddingInlineStart | number | Horizontal padding of link |
Declaration source: vendor/components/anchor/style/index.ts
import type { CSSObject } from '@ant-design/cssinjs';
import { unit } from '@ant-design/cssinjs';
import { resetComponent, textEllipsis } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc 链接纵向内间距
* @descEN Vertical padding of link
*/
linkPaddingBlock: number;
/**
* @desc 链接横向内间距
* @descEN Horizontal padding of link
*/
linkPaddingInlineStart: number;
}
/**
* @desc Anchor 组件的 Token
* @descEN Token for Anchor component
*/
interface AnchorToken extends FullToken<'Anchor'> {
/**
* @desc 容器块偏移量
* @descEN Holder block offset
*/
holderOffsetBlock: number;
/**
* @desc 次级锚点块内间距
* @descEN Secondary anchor block padding
*/
anchorPaddingBlockSecondary: number | string;
/**
* @desc 锚点球大小
* @descEN Anchor ball size
*/
anchorBallSize: number | string;
/**
* @desc 锚点标题块
* @descEN Anchor title block
*/
anchorTitleBlock: number | string;
}
FAQ
In version 5.25.0+, the :target pseudo-class of the destination element does not take effect as expected after anchor navigation.
For the purpose of page performance optimization, the implementation of anchor navigation has been changed from window.location.href to window.history.pushState/replaceState. Since pushState/replaceState does not trigger a page reload, the browser will not automatically update the matching state of the :target pseudo-class. To resolve this issue, you can manually construct the full URL: href = window.location.origin + window.location.pathname + '#xxx'.
Shared native props
Tips: The following generic properties apply to most antd components; those not supported are described separately.
| Property | Description | Type | Default |
|---|---|---|---|
| style | The additional style | CSSProperties | - |
| className | The additional css class | string | - |
| rootClassName | ClassName on the root element | string | - |
| autoFocus | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false |
Install and reproduce an example
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.
Native type references
The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.
vendor/components/anchor/Anchor.tsxvendor/components/anchor/AnchorLink.tsxvendor/components/anchor/index.tsxvendor/components/anchor/style/index.ts
Source and license
https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd
Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.