Preview Updated 2026-05-10

Anchor

Sidebar that lists page anchors explicitly, highlights the section in view as you scroll, and smooth-scrolls on click.

Basic usage

items is the anchor list; each entry is { href, label }. href looks like #section-id and corresponds to a <h2 id="section-id"> on the page. One level of children nesting is supported.

概述

这是概述部分的第 1 段示例文本。

这是概述部分的第 2 段示例文本。

这是概述部分的第 3 段示例文本。

这是概述部分的第 4 段示例文本。

基础用法

这是基础用法部分的第 1 段示例文本。

这是基础用法部分的第 2 段示例文本。

这是基础用法部分的第 3 段示例文本。

这是基础用法部分的第 4 段示例文本。

API

这是 API 部分的第 1 段示例文本。

这是 API 部分的第 2 段示例文本。

这是 API 部分的第 3 段示例文本。

这是 API 部分的第 4 段示例文本。

<CfAnchor :items="items" :offset-top="0" />

<CfAnchor items={items} offsetTop={0} />

API

Prop	Type	Default	Description
`items`	`AnchorItem[]`	`—`	Anchor list
`offsetTop`	`number`	`0`	Top offset (in pixels) used for highlight detection and scroll-to
`bounds`	`number`	`5`	An element is considered in view when its top distance ≤ `bounds + offsetTop`; smaller is stricter
`target`	`string`	`—`	Scroll container selector; omit to listen on `window`

AnchorItem

Field	Type	Description
`href`	`string`	Anchor hash, e.g. `#install`
`label`	`string`	Display text
`children`	`AnchorItem[]`	Child anchors

Events: onChange(href) — fires when the highlighted anchor changes.