---
title: Anchor 锚点
---

# Anchor 锚点

Through the anchor point, you can quickly find the position of the information content on the current page.

## Basic Usage

The most basic usage

:::example

anchor/basic

:::

## Horizontal Mode

Horizontally aligned anchors

:::tip

Horizontal Mode does not support `sub-link` slots

:::

:::example

anchor/horizontal

:::

## Scroll Container

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.

:::example

anchor/scroll

:::

## Anchor link change

Listening for anchor link change

:::example

anchor/change

:::

## Underline type

set `type="underline"` change to underline type

:::example

anchor/underline

:::

## Affix Mode

Use the affix component to fix the anchor point within the page.

:::example

anchor/affix

:::

## Anchor API

### Anchor Attributes

| 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      |

### Anchor Events

| 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` |

### Anchor Exposes

| Name     | Description                               | Type                                |
| -------- | ----------------------------------------- | ----------------------------------- |
| scrollTo | Manually scroll to the specific position. | ^[Function]`(href: string) => void` |

### Anchor Slots

| Name    | Description               |
| ------- | ------------------------- |
| default | AnchorLink component list |

### AnchorLink Attributes

| Property | Description                          | Type     | Default |
| -------- | ------------------------------------ | -------- | ------- |
| title    | The text content of the anchor link. | `string` | —       |
| href     | The address of the anchor link.      | `string` | —       |

### AnchorLink Slots

| Name     | Description                     |
| -------- | ------------------------------- |
| default  | The content of the anchor link. |
| sub-link | Slots for child links.          |