Anchor锚点

用于跳转到页面指定位置。

何时使用

需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。

开发者注意事项：
自 4.24.0 起，由于组件从 class 重构成 FC，之前一些获取 ref 并调用内部实例方法的写法都会失效

代码演示

基本

最简单的用法。

TypeScript
JavaScript
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;

横向 Anchor

横向 Anchor。

TypeScript
JavaScript
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;

不浮动，状态不随页面滚动变化。

TypeScript
JavaScript
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;

点击锚点不记录历史。

TypeScript
JavaScript
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;

自定义锚点高亮。

TypeScript
JavaScript
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;

设置锚点滚动偏移量

锚点目标滚动到屏幕正中间。

TypeScript
JavaScript
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;

TypeScript
JavaScript
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;

API

Anchor Props

成员	说明	类型	默认值	版本
affix	固定模式	boolean	true
bounds	锚点区域边界	number	5
getContainer	指定滚动的容器	() => HTMLElement	() => window
getCurrentAnchor	自定义高亮的锚点	(activeLink: string) => string	-
offsetTop	距离窗口顶部达到指定偏移量后触发	number
showInkInFixed	`affix={false}` 时是否显示小方块	boolean	false
targetOffset	锚点滚动偏移量，默认与 offsetTop 相同，例子	number	-
onChange	监听锚点链接改变	(currentActiveLink: string) => void	-
onClick	`click` 事件的 handler	(e: MouseEvent, link: object) => void	-
items	数据化配置选项内容，支持通过 children 嵌套	{ key, href, title, target, children }[] 具体见	-	5.1.0
direction	设置导航方向	`vertical` \| `horizontal`	`vertical`	5.2.0

AnchorItem

成员	说明	类型	默认值
key	唯一标志	string \| number	-
href	锚点链接	string	-
target	该属性指定在何处显示链接的资源	string	-
title	文字内容	ReactNode	-
children	嵌套的 Anchor Link，`注意：水平方向该属性不支持`	AnchorItem[]	-

Link Props

建议使用 items 形式。

成员	说明	类型	默认值
href	锚点链接	string	-
target	该属性指定在何处显示链接的资源	string	-
title	文字内容	ReactNode	-

Design Token

Global Token

Token 名称	描述	类型	默认值
colorPrimary	品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义	string	#1677ff
colorSplit	用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。	string	rgba(5, 5, 5, 0.06)
colorText	最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。	string	rgba(0, 0, 0, 0.88)
fontFamily	Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
fontSizeLG	大号字体大小	number	16
lineHeight	文本行高	number	1.5714285714285714
lineType	用于控制组件边框、分割线等的样式，默认是实线	string	solid
lineWidthBold	描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。	number	2
motionDurationSlow	动效播放速度，慢速。用于大型元素如面板动画交互	string	0.3s
padding	控制元素的内间距。	number	16
paddingXXS	控制元素的极小内间距。	number	4

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;

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;

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;

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;

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;

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;

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;

API

Anchor Props

成员	说明	类型	默认值	版本
affix	固定模式	boolean	true
bounds	锚点区域边界	number	5
getContainer	指定滚动的容器	() => HTMLElement	() => window
getCurrentAnchor	自定义高亮的锚点	(activeLink: string) => string	-
offsetTop	距离窗口顶部达到指定偏移量后触发	number
showInkInFixed	`affix={false}` 时是否显示小方块	boolean	false
targetOffset	锚点滚动偏移量，默认与 offsetTop 相同，例子	number	-
onChange	监听锚点链接改变	(currentActiveLink: string) => void	-
onClick	`click` 事件的 handler	(e: MouseEvent, link: object) => void	-
items	数据化配置选项内容，支持通过 children 嵌套	{ key, href, title, target, children }[] 具体见	-	5.1.0
direction	设置导航方向	`vertical` \| `horizontal`	`vertical`	5.2.0

AnchorItem

成员	说明	类型	默认值
key	唯一标志	string \| number	-
href	锚点链接	string	-
target	该属性指定在何处显示链接的资源	string	-
title	文字内容	ReactNode	-
children	嵌套的 Anchor Link，`注意：水平方向该属性不支持`	AnchorItem[]	-

Link Props

建议使用 items 形式。

成员	说明	类型	默认值
href	锚点链接	string	-
target	该属性指定在何处显示链接的资源	string	-
title	文字内容	ReactNode	-

Token 名称

描述

类型

默认值

colorPrimary

品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义

string

#1677ff

colorSplit

用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。

string

rgba(5, 5, 5, 0.06)

colorText

最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。

string

rgba(0, 0, 0, 0.88)

fontFamily

Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。

string

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'

fontSize

设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。

number

fontSizeLG

大号字体大小

number

lineHeight

文本行高

number

1.5714285714285714

lineType

用于控制组件边框、分割线等的样式，默认是实线

string

solid

lineWidthBold

描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。

number

motionDurationSlow

动效播放速度，慢速。用于大型元素如面板动画交互

string

0.3s

padding

控制元素的内间距。

number

paddingXXS

控制元素的极小内间距。

number