docs/en-US/component/anchor.md
Through the anchor point, you can quickly find the position of the information content on the current page.
The most basic usage
:::demo
anchor/basic
:::
Horizontally aligned anchors
:::tip
Horizontal Mode does not support sub-link slots
:::
:::demo
anchor/horizontal
:::
Custom scroll area, use offset props can set anchor scroll offset, listen the link-click event and prevents browser default behavior then it will not change history.
:::demo
anchor/scroll
:::
Listening for anchor link change
:::demo
anchor/change
:::
set type="underline" change to underline type
:::demo
anchor/underline
:::
Use the affix component to fix the anchor point within the page.
:::demo
anchor/affix
:::
| Property | Description | Type | Default |
|---|---|---|---|
| container | Scroll container. | string | HTMLElement | Window | — |
| offset | Set the offset of the anchor scroll. | number | 0 |
| bound | The offset of the element starting to trigger the anchor. | number | 15 |
| duration | Set the scroll duration of the container, in milliseconds. | number | 300 |
| marker | Whether to show the marker. | ^[boolean] | true |
| type | Set Anchor type. | ^[enum]'default' | 'underline' | default |
| direction | Set Anchor direction. | ^[enum]'vertical' | 'horizontal' | vertical |
| select-scroll-top ^(2.9.2) | Scroll whether link is selected at the top | ^[boolean] | false |
| Name | Description | Type |
|---|---|---|
| change | Callback when the step changes | ^[Function](href: string) => void |
| click | Triggered when the user clicks on the link | ^[Function](e: MouseEvent, href?: string) => void |
| Name | Description | Type |
|---|---|---|
| scrollTo | Manually scroll to the specific position. | ^[Function](href: string) => void |
| Name | Description |
|---|---|
| default | AnchorLink component list |
| Property | Description | Type | Default |
|---|---|---|---|
| title | The text content of the anchor link. | string | — |
| href | The address of the anchor link. | string | — |
| Name | Description |
|---|---|
| default | The content of the anchor link. |
| sub-link | Slots for child links. |