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, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/components/anchor.md.
Leaf UIReact 组件库
GitHub

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

属性类型默认值说明
keystring—必需。稳定且唯一的标识。
titleReactNode—必需。标题内容。
hrefstring—必需。链接目标。
childrenreadonly AnchorItem[]—子内容；嵌套数据类型表示子节点。

Anchor API

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

Affix API

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

类型与交互

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

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

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