Hyperlinks to scroll on one page.
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.
The simplest usage.
import React from 'react';
import { Anchor, Row, Col } from 'antd';
const App: React.FC = () => (
<Row>
<Col span={16}>
<div id="part-1" style={{ height: '100vh', background: 'rgba(255,0,0,0.02)' }} />
<div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }} />
<div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }} />
</Col>
<Col span={8}>
<Anchor
items={[
{
key: 'part-1',
href: '#part-1',
title: 'Part 1',
},
{
key: 'part-2',
href: '#part-2',
title: 'Part 2',
},
{
key: 'part-3',
href: '#part-3',
title: 'Part 3',
},
]}
/>
</Col>
</Row>
);
export default App;
Horizontally aligned anchors
import React from 'react';
import { Anchor } from 'antd';
const App: React.FC = () => (
<>
<div style={{ padding: '20px' }}>
<Anchor
direction="horizontal"
items={[
{
key: 'part-1',
href: '#part-1',
title: 'Part 1',
},
{
key: 'part-2',
href: '#part-2',
title: 'Part 2',
},
{
key: 'part-3',
href: '#part-3',
title: 'Part 3',
},
{
key: 'part-4',
href: '#part-4',
title: 'Part 4',
},
{
key: 'part-5',
href: '#part-5',
title: 'Part 5',
},
{
key: 'part-6',
href: '#part-6',
title: 'Part 6',
},
]}
/>
</div>
<div>
<div
id="part-1"
style={{
width: '100vw',
height: '100vh',
textAlign: 'center',
background: 'rgba(0,255,0,0.02)',
}}
/>
<div
id="part-2"
style={{
width: '100vw',
height: '100vh',
textAlign: 'center',
background: 'rgba(0,0,255,0.02)',
}}
/>
<div
id="part-3"
style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#FFFBE9' }}
/>
<div
id="part-4"
style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#F4EAD5' }}
/>
<div
id="part-5"
style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#DAE2B6' }}
/>
<div
id="part-6"
style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#CCD6A6' }}
/>
</div>
</>
);
export default App;
Do not change state when page is scrolling.
import React from 'react';
import { Anchor } from 'antd';
const App: React.FC = () => (
<Anchor
affix={false}
items={[
{
key: '1',
href: '#components-anchor-demo-basic',
title: 'Basic demo',
},
{
key: '2',
href: '#components-anchor-demo-static',
title: 'Static demo',
},
{
key: '3',
href: '#api',
title: 'API',
children: [
{
key: '4',
href: '#anchor-props',
title: 'Anchor Props',
},
{
key: '5',
href: '#link-props',
title: 'Link Props',
},
],
},
]}
/>
);
export default App;
Clicking on an anchor does not record history.
import React from 'react';
import { Anchor } from 'antd';
const handleClick = (
e: React.MouseEvent<HTMLElement>,
link: {
title: React.ReactNode;
href: string;
},
) => {
e.preventDefault();
console.log(link);
};
const App: React.FC = () => (
<Anchor
affix={false}
onClick={handleClick}
items={[
{
key: '1',
href: '#components-anchor-demo-basic',
title: 'Basic demo',
},
{
key: '2',
href: '#components-anchor-demo-static',
title: 'Static demo',
},
{
key: '3',
href: '#api',
title: 'API',
children: [
{
key: '4',
href: '#anchor-props',
title: 'Anchor Props',
},
{
key: '5',
href: '#link-props',
title: 'Link Props',
},
],
},
]}
/>
);
export default App;
Customize the anchor highlight.
import React from 'react';
import { Anchor } from 'antd';
const getCurrentAnchor = () => '#components-anchor-demo-static';
const App: React.FC = () => (
<Anchor
affix={false}
getCurrentAnchor={getCurrentAnchor}
items={[
{
key: '1',
href: '#components-anchor-demo-basic',
title: 'Basic demo',
},
{
key: '2',
href: '#components-anchor-demo-static',
title: 'Static demo',
},
{
key: '3',
href: '#api',
title: 'API',
children: [
{
key: '4',
href: '#anchor-props',
title: 'Anchor Props',
},
{
key: '5',
href: '#link-props',
title: 'Link Props',
},
],
},
]}
/>
);
export default App;
Anchor target scroll to screen center.
import React, { useEffect, useState } from 'react';
import { Anchor, Row, Col } from 'antd';
const App: React.FC = () => {
const topRef = React.useRef<HTMLDivElement>(null);
const [targetOffset, setTargetOffset] = useState<number>();
useEffect(() => {
setTargetOffset(topRef.current?.clientHeight);
}, []);
return (
<div>
<Row>
<Col span={18}>
<div
id="part-1"
style={{ height: '100vh', background: 'rgba(255,0,0,0.02)', marginTop: '30vh' }}
>
Part 1
</div>
<div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }}>
Part 2
</div>
<div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }}>
Part 3
</div>
</Col>
<Col span={6}>
<Anchor
targetOffset={targetOffset}
items={[
{
key: 'part-1',
href: '#part-1',
title: 'Part 1',
},
{
key: 'part-2',
href: '#part-2',
title: 'Part 2',
},
{
key: 'part-3',
href: '#part-3',
title: 'Part 3',
},
]}
/>
</Col>
</Row>
<div
style={{
height: '30vh',
background: 'rgba(0,0,0,0.85)',
position: 'fixed',
top: 0,
left: 0,
width: '75%',
color: '#FFF',
}}
ref={topRef}
>
<div>Fixed Top Block</div>
</div>
</div>
);
};
export default App;
Listening for anchor link change.
import React from 'react';
import { Anchor } from 'antd';
const onChange = (link: string) => {
console.log('Anchor:OnChange', link);
};
const App: React.FC = () => (
<Anchor
affix={false}
onChange={onChange}
items={[
{
key: '1',
href: '#components-anchor-demo-basic',
title: 'Basic demo',
},
{
key: '2',
href: '#components-anchor-demo-static',
title: 'Static demo',
},
{
key: '3',
href: '#api',
title: 'API',
children: [
{
key: '4',
href: '#anchor-props',
title: 'Anchor Props',
},
{
key: '5',
href: '#link-props',
title: 'Link Props',
},
],
},
]}
/>
);
export default App;
| 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 | |
| showInkInFixed | Whether show ink-square when affix={false} | boolean | false | |
| 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 |
| 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[] | - |
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 |