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 段示例文本。

src/App.vue

<script setup lang="ts">
import { CfAnchor, type AnchorItem } from '@chufix-design/vue';

const items: AnchorItem[] = [
  { href: '#anchor-intro', label: '概述' },
  { href: '#anchor-usage', label: '基础用法' },
  { href: '#anchor-api', label: 'API' },
];
</script>
<template>
  <div style="display: grid; grid-template-columns: 1fr 160px; gap: 24px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line-1); border-radius: 8px; padding: 16px;">
    <div>
      <h3 id="anchor-intro" style="margin-top: 0;">概述</h3>
      <p style="color: var(--fg-2);" v-for="i in 4" :key="`a-${i}`">这是概述部分的第 {{ i }} 段示例文本。</p>
      <h3 id="anchor-usage">基础用法</h3>
      <p style="color: var(--fg-2);" v-for="i in 4" :key="`b-${i}`">这是基础用法部分的第 {{ i }} 段示例文本。</p>
      <h3 id="anchor-api">API</h3>
      <p style="color: var(--fg-2);" v-for="i in 4" :key="`c-${i}`">这是 API 部分的第 {{ i }} 段示例文本。</p>
    </div>
    <CfAnchor :items="items" :offset-top="0" />
  </div>
</template>

<script setup>
import { CfAnchor } from '@chufix-design/vue';

const items= [
  { href: '#anchor-intro', label: '概述' },
  { href: '#anchor-usage', label: '基础用法' },
  { href: '#anchor-api', label: 'API' },
];
</script>
<template>
  <div style="display: grid; grid-template-columns: 1fr 160px; gap: 24px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line-1); border-radius: 8px; padding: 16px;">
    <div>
      <h3 id="anchor-intro" style="margin-top: 0;">概述</h3>
      <p style="color: var(--fg-2);" v-for="i in 4" :key="`a-${i}`">这是概述部分的第 {{ i }} 段示例文本。</p>
      <h3 id="anchor-usage">基础用法</h3>
      <p style="color: var(--fg-2);" v-for="i in 4" :key="`b-${i}`">这是基础用法部分的第 {{ i }} 段示例文本。</p>
      <h3 id="anchor-api">API</h3>
      <p style="color: var(--fg-2);" v-for="i in 4" :key="`c-${i}`">这是 API 部分的第 {{ i }} 段示例文本。</p>
    </div>
    <CfAnchor :items="items" :offset-top="0" />
  </div>
</template>

import { CfAnchor } from '@chufix-design/react';

export default function Demo() {
  const items: AnchorItem[] = [
    { href: '#anchor-intro', label: '概述' },
    { href: '#anchor-usage', label: '基础用法' },
    { href: '#anchor-api', label: 'API' },
  ];
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 160px", gap: 24, maxHeight: 320, overflowY: "auto", border: "1px solid var(--line-1)", borderRadius: 8, padding: 16 }}>
          <div>
            <h3 id="anchor-intro" style={{ marginTop: 0 }}>概述</h3>
            <p style={{ color: "var(--fg-2)" }} v-for="i in 4" key={`a-${i}`}>这是概述部分的第 {i} 段示例文本。</p>
            <h3 id="anchor-usage">基础用法</h3>
            <p style={{ color: "var(--fg-2)" }} v-for="i in 4" key={`b-${i}`}>这是基础用法部分的第 {i} 段示例文本。</p>
            <h3 id="anchor-api">API</h3>
            <p style={{ color: "var(--fg-2)" }} v-for="i in 4" key={`c-${i}`}>这是 API 部分的第 {i} 段示例文本。</p>
          </div>
          <CfAnchor items={items} offsetTop={0} />
        </div>
    </>
  );
}

import { CfAnchor } from '@chufix-design/react';

export default function Demo() {
  const items= [
    { href: '#anchor-intro', label: '概述' },
    { href: '#anchor-usage', label: '基础用法' },
    { href: '#anchor-api', label: 'API' },
  ];
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 160px", gap: 24, maxHeight: 320, overflowY: "auto", border: "1px solid var(--line-1)", borderRadius: 8, padding: 16 }}>
          <div>
            <h3 id="anchor-intro" style={{ marginTop: 0 }}>概述</h3>
            <p style={{ color: "var(--fg-2)" }} v-for="i in 4" key={`a-${i}`}>这是概述部分的第 {i} 段示例文本。</p>
            <h3 id="anchor-usage">基础用法</h3>
            <p style={{ color: "var(--fg-2)" }} v-for="i in 4" key={`b-${i}`}>这是基础用法部分的第 {i} 段示例文本。</p>
            <h3 id="anchor-api">API</h3>
            <p style={{ color: "var(--fg-2)" }} v-for="i in 4" key={`c-${i}`}>这是 API 部分的第 {i} 段示例文本。</p>
          </div>
          <CfAnchor items={items} offsetTop={0} />
        </div>
    </>
  );
}

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.