> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/anchor.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# Anchor 锚点与固钉

浏览长页目录并保持重要操作可见。

## 基础用法


- [概况](#_r_3_-0)
- [成员](#_r_3_-1)
- [设置](#_r_3_-2)

### 概况

滚动这一块内容，或点击左侧的目录。

### 成员

滚动这一块内容，或点击左侧的目录。

### 设置

滚动这一块内容，或点击左侧的目录。

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/anchor/basic.tsx"
import { Anchor } from '@ifhover/leaf-ui';

import { useCallback, useId, useRef } from 'react';

export function AnchorBasic() {
  const scroll = useRef<HTMLDivElement>(null),
    id = useId();
  const container = useCallback(() => scroll.current ?? window, []);
  const sections = [
    '概况',
    '成员',
    '设置',
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '120px minmax(0, 1fr)', gap: 20 }}>
      <Anchor
        container={container}
        items={sections.map((title, index) => ({ key: title, title, href: `#${id}-${index}` }))}
      />
      <div ref={scroll} style={{ height: 240, overflow: 'auto' }}>
        {sections.map((title, index) => (
          <section key={title} id={`${id}-${index}`} style={{ minHeight: 210 }}>
            <h3>{title}</h3>
            <p>
              {'滚动这一块内容，或点击左侧的目录。'}
            </p>
          </section>
        ))}
      </div>
    </div>
  );
}
```

展开代码

## 自定义滚动区域


向下滚动，操作按钮会保持可见。

保存修改

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/anchor/basic.tsx"
import { Affix, Button } from '@ifhover/leaf-ui';

import { useCallback, useRef } from 'react';

export function AnchorAffix() {
  const scroll = useRef<HTMLDivElement>(null);
  const container = useCallback(() => scroll.current ?? window, []);
  return (
    <div
      ref={scroll}
      style={{
        height: 200,
        overflow: 'auto',
        background: 'var(--leaf-color-surface-muted)',
        padding: 16,
        borderRadius: 'var(--leaf-radius)',
      }}
    >
      <p>{'向下滚动，操作按钮会保持可见。'}</p>
      <Affix container={container} offsetTop={8}>
        <Button>{'保存修改'}</Button>
      </Affix>
      <div style={{ height: 450 }} />
    </div>
  );
}
```

展开代码

## AnchorItem

| 属性         | 类型                                         | 默认值 | 说明               |
| ---------- | ------------------------------------------ | --- | ---------------- |
| `key`      | `string`                                   | —   | 必需。稳定且唯一的标识。     |
| `title`    | `ReactNode`                                | —   | 必需。标题内容。         |
| `href`     | `string`                                   | —   | 必需。链接目标。         |
| `children` | `readonly `[`AnchorItem`](#anchoritem)`[]` | —   | 子内容；嵌套数据类型表示子节点。 |

## Anchor API

| 属性               | 类型                                         | 默认值    | 说明                   |
| ---------------- | ------------------------------------------ | ------ | -------------------- |
| `items`          | `readonly `[`AnchorItem`](#anchoritem)`[]` | —      | 必需。展示的条目。            |
| `container`      | `() => HTMLElement \| Window`              | —      | 自定义挂载或滚动容器。          |
| `offset`         | `number`                                   | `12`   | 滚动目标距离容器顶部的像素数。      |
| `activeKey`      | `string`                                   | —      | 受控的当前章节。             |
| `onActiveChange` | `(key: string) => void`                    | —      | 当前章节变化时调用。           |
| `smooth`         | `boolean`                                  | `true` | 启用平滑滚动，减少动画设置下会自动关闭。 |

## Affix API

| 属性              | 类型                            | 默认值 | 说明              |
| --------------- | ----------------------------- | --- | --------------- |
| `offsetTop`     | `number`                      | `0` | 固定位置距离容器顶部的像素数。 |
| `offsetBottom`  | `number`                      | —   | 固定位置距离容器底部的像素数。 |
| `container`     | `() => HTMLElement \| Window` | —   | 自定义挂载或滚动容器。     |
| `onAffixChange` | `(affixed: boolean) => void`  | —   | 固定状态变化时调用。      |

## 类型与交互

组装可复用配置时，可导入对应的属性和数据类型。

```ts
import type { AnchorItem, AnchorProps, AffixProps } from '@ifhover/leaf-ui';
```

为仅展示图标的操作提供可访问名称。交互控件支持键盘操作，并跟随 ConfigProvider 的主题和减少动画设置。