Search
Anchor

Hyperlinks to scroll on one page.

Anchor

When to use

For displaying anchor hyperlinks on page and jumping between them.


Basic

The simplest usage.

Static Anchor

Do not change state when page is scrolling.

Customize the onClick event

Clicking on an anchor does not record history.

Customize the anchor highlight

Customize the anchor highlight.

Set Anchor scroll offset

Anchor target scroll to screen center.
Listening for anchor link change.

API

Anchor Props
PropertyDescriptionTypeDefault
affix
Fixed mode of Anchor
boolean
true
bounds
Bounding distance of anchor area
number
5(px)
getContainer
Scrolling container
() => HTMLElement
() => window
offsetBottom
Pixels to offset from bottom when calculating position of scroll
number
-
offsetTop
Pixels to offset from top when calculating position of scroll
number
0
showInkInFixed
Whether show ink-balls in Fixed mode
boolean
false
onClick
set the handler to handle click event
Function(e: Event, link: Object)
-
getCurrentAnchor
Customize the anchor highlight
() => string
-
targetOffset
Anchor scroll offset, default as offsetTop, example
number
-
onChange
Listening for anchor link change
(currentActiveLink: string) => void
PropertyDescriptionTypeDefault
href
target of hyperlink
string
title
content of hyperlink
string|ReactNode
target
Specifies where to display the linked URL
string