Anchor

Demos

How to import


import { Anchor } from '@douyinfe/semi-ui';

Basic Usage

Use Link to create an anchor, click it to jump to the hash tag location.

Integrated Usage

You can use getContainer, targetOffset, offsetTop, and style to create a out of the box hyperAnchor.Link navigation bar.

getContainer：you can set the container of scroll content with getContainer property. Its default value is window.
targetOffset: you can set the distance between the anchor point and the top of the container by setting targetOffset. v>=1.9
style：the default position of Anchor is relative. You can customize it with style object.
offsetTop：offsetTop can trigger the current Link switch when the scrolling content reaches a specified offset from the top of the container.


import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';

() => {
    const getContainer = () => {
        return document.querySelector('window');
    };
    return (
        <div>
            <span>See the fixed Anchor on the right </span>
            <Anchor
                getContainer={getContainer}
                offsetTop={100}
                targetOffset={100} // v>=1.9
                style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3 }} >
                <Anchor.Link href="#Basic_Usage" title="Fixed Anchor" />
                <Anchor.Link href="#Integrated_Usage" title="Integrated Usage" />
                <Anchor.Link href="#Size" title="Size" />
                <Anchor.Link href="#Rail_Theme" title="Rail Theme" />
                <Anchor.Link href="#Auto_Collapse" title="Auto Collapse" />
                <Anchor.Link href="#Show_Tooltip" title="Show Tooltip" />
                <Anchor.Link href="#Tooltip_Position" title="Tooltip Position" />
                <Anchor.Link href="#API_Reference" title="API Reference">
                    <Anchor.Link href="#Anchor" title="Anchor" />
                    <Anchor.Link href="#Anchor.Link" title="Anchor.Link" />
                </Anchor.Link>
            </Anchor>
        </div>
    );
};

Size

You can change Anchor size with size property.

Rail Theme

You can change rail color with railTheme property. Three themes are supported and the default value is primary.

Auto Collapse

Anchor can dynamically display child links with autoCollapse property. The default is false.

showTooltip can display the title of link when it exceeds the max-width. The default value is false.

You can change the Tooltip position with position property. It only works when showTooltip is true.

API Reference

PROPERTIES	INSTRUCTIONS	TYPE	DEFAULT	VERSION
autoCollapse	Dynamically display child link	boolean	false
className	Class name	string	-
defaultAnchor	Default highlight anchor	string	-
getContainer	Scroll container	() => HTMLElement	window
maxHeight	max-height of Anchor	string \| number	`750px`
maxWidth	max-width of Anchor	string \| number	`200px`
offsetTop	Trigger the current link switch when the scrolling content reaches a specified offset from the top of the container	number	0
onChange	Change event	(currentLink, previousLink) => void	-
onClick	Click event	(event, currentLink) => void	-
position	Tooltip position，same as `position` property of Tooltip component	string	-
railTheme	Style of scroll rail，one of `primary`，`tertiary`，`muted`	string	`primary`
scrollMotion	Animation of scroll behavior	boolean	false
showTooltip	Toggle whether to show tooltip, if passed in as object: type，type of component to show tooltip, support Tooltip and Popover, the default is Tooltip; opts, properties that will be passed directly to the component. The object form setting is provided since version 2.36.0	boolean \| {type: 'tooltip'\|'popover', opts: object}	false
size	Size of Anchor，one of `small`，`default`	string	`default`
style	Style object	object	-
targetOffset	Anchor offset from top of target	number	0	1.9.0

Anchor.Link

PROPERTIES	INSTRUCTIONS	TYPE	DEFAULT
className	Class name	string	-
href	The target of hyper link	string	-
style	Style object	object	-
title	The content of hyper link	string\|ReactNode	-

Content Guidelines

Write in sentence case
Keep it concise and avoid line breaks

Design Tokens

FAQ

Why didn't my link highlight and slide to follow?
Check whether you can scroll to the specified position by clicking the anchor:
- No, it means there is a problem with the id. check whether the id exists in the document;
- Yes, it may be that the scrolling container is not set correctly to ensure that the content of the document is wrapped in the scrolling container. The default scrolling container is window. If your container is a div of .my-container, you should set the scrolling container to this div.
```
import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';

function App() {
    const getContainer = () => {
        return document.querySelector('.my-container');
    };
    return (
        <Anchor
            /* Other props */
            getContainer={getContainer}
        >
            /* Links */
        </Anchor>
    )
}
```