logoAnt Design

⌘ K
  • 디자인
  • 개발
  • 컴포넌트
  • 블로그
  • 자료
5.21.3
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Anchor

Hyperlinks to scroll on one page.
가져오기import{ Anchor }from"antd";
소스components/anchor
문서
이 페이지 수정변경 로그

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference
Work with Us

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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 obtaining ref and calling internal instance methods will invalid.

Examples

API

Common props ref:Common props

Anchor Props

PropertyDescriptionTypeDefaultVersion
affixFixed mode of Anchorboolean | Omit<AffixProps, 'offsetTop' | 'target' | 'children'>trueobject: 5.19.0
boundsBounding distance of anchor areanumber5
getContainerScrolling container() => HTMLElement() => window
getCurrentAnchorCustomize the anchor highlight(activeLink: string) => string-
offsetTopPixels to offset from top when calculating position of scrollnumber0
showInkInFixedWhether show ink-square when affix={false}booleanfalse
targetOffsetAnchor scroll offset, default as offsetTop, examplenumber-
onChangeListening for anchor link change(currentActiveLink: string) => void
onClickSet the handler to handle click event(e: MouseEvent, link: object) => void-
itemsData configuration option content, support nesting through children{ key, href, title, target, children }[] see-5.1.0
directionSet Anchor directionvertical | horizontalvertical5.2.0
replaceReplace items' href in browser history instead of pushing itbooleanfalse5.7.0

AnchorItem

PropertyDescriptionTypeDefaultVersion
keyThe unique identifier of the Anchor Linkstring | number-
hrefThe target of hyperlinkstring
targetSpecifies where to display the linked URLstring
titleThe content of hyperlinkReactNode
childrenNested Anchor Link, Attention: This attribute does not support horizontal orientationAnchorItem[]-
replaceReplace item href in browser history instead of pushing itbooleanfalse5.7.0

Link Props

We recommend using the items form instead.

PropertyDescriptionTypeDefaultVersion
hrefThe target of hyperlinkstring
targetSpecifies where to display the linked URLstring
titleThe content of hyperlinkReactNode

Design Token

컴포넌트 토큰어떻게 사용하나요?

토큰 이름설명타입기본값
linkPaddingBlock链接纵向内间距number4
linkPaddingInlineStart链接横向内间距number16

글로벌 토큰어떻게 사용하나요?

Basic
codepen icon
External Link Icon
expand codeexpand code
Horizontal Anchor
codepen icon
External Link Icon
expand codeexpand code
Set Anchor scroll offset
codepen icon
External Link Icon
expand codeexpand code
Replace href in history
codepen icon
External Link Icon
expand codeexpand code
Component Token
codepen icon
External Link Icon
expand codeexpand code
Static Anchor
codepen icon
External Link Icon
expand codeexpand code
Customize the onClick event
codepen icon
External Link Icon
expand codeexpand code
Customize the anchor highlight
codepen icon
External Link Icon
expand codeexpand code
Listening for anchor link change
codepen icon
External Link Icon
expand codeexpand code
Deprecated JSX demo
codepen icon
External Link Icon
expand codeexpand code
Basic demo
Static demo
API
Anchor Props
Link Props
Basic demo
Static demo
API
Anchor Props
Link Props
Basic demo
Static demo
API
Anchor Props
Link Props
Basic demo
Static demo
API
Anchor Props
Link Props
Basic demo
Static demo
API
Anchor Props
Link Props