xl vision
  • Component
  • React Hooks
  • Playground
  • Overview
  • Color
  • Getting Start
    • Installation
  • General
    • Icon
    • Button
  • Layout
    • Grid
  • Form
    • Input
    • InputNumber
    • Textarea
  • Navigation
    • Dropdown
    • Affix
    • BackTop
    • Anchor
  • Data Display
    • Tooltip
    • Popover
    • Avatar
  • Faceback
    • Popconfirm
    • Dialog
    • Message
    • Notication
  • Animation
    • Transition
    • TransitionGroup
    • CollapseTransition
    • Ripple
  • Styles
    • Theme
    • CssBaseline
  • Basic Component
    • BaseButton
    • Portal
    • Popper
    • Modal
    • ResizeObserver

Anchor

Used to jump to the specified location on the page.

Examples

Examples
Not fixed position
Fixed position
Set Offset
Anchor API
AnchorLink API
Not fixed position

It can be displayed in an unfixed position.

Examples
Not fixed position
Fixed position
Set Offset
Anchor API
AnchorLink API
Fixed position

Anchor position can be fixed by setting affix and offsetTop or offsetBottom

Examples
Not fixed position
Fixed position
Set Offset
Anchor API
AnchorLink API
Set offset

The highlight is activated when the scroll offset of the anchor target is within the set offset of the container element.

Properties

Anchor

When affix is enabled, the effect is the same as Affix

PropertyDescriptionTypeDefaultRequire
affixWhether to enable fixed modebooleantruefalse
affixTargetThe element referenced when fixed, the same as scrollTarget when not passedWindow | HTMLElement | (() => Window | HTMLElement)() => windowfalse
scrollTargetContainer when scrolling, same as scrollTarget when not passedWindow | HTMLElement | (() => Window | HTMLElement)() => windowfalse
offsetTopReferenceAffixnumber-false
offsetBottomReferenceAffixnumber-false
boundsAnchor Region Boundarynumber5false
targetOffsetAnchor scroll offsetnumber0false
onChangeListen for anchor link changes(currentActiveLink: string) => void-false

AnchorLink

PropertyDescriptionTypeDefaultRequire
titleTitlestring-true
hrefAnchor hrefstring-true

Methods

Anchor

MethodDescriptionTypeDefault
scrollToscroll to the specified link(activeLink: string) => void-
Examples
Not fixed position
Fixed position
Set offset
Properties
Anchor
AnchorLink
Methods
Anchor
Copyright © 2020-2021 Rhys Xia