Anchor 锚点

通过锚点，您可以很快找到当前页面上信息内容的位置。

基础用法

最简单的用法。

基础用法

export function AnchorBasic() {  return (    <ElAnchor className={styles.anchor} offset={70}>      <ElAnchorLink href="#基础用法">基础用法</ElAnchorLink>      <ElAnchorLink href="#水平模式">水平模式</ElAnchorLink>      <ElAnchorLink href="#滚动容器">滚动容器</ElAnchorLink>      <ElAnchorLink        href="#anchor-api"        subLink={          <>            <ElAnchorLink href="#anchor-attributes">Anchor Attributes</ElAnchorLink>            <ElAnchorLink href="#anchor-events">Anchor Events</ElAnchorLink>          </>        }      >        Anchor API      </ElAnchorLink>    </ElAnchor>  );}

水平模式

水平排列的锚点

TIP

水平模式不支持sub-link槽位

基础用法

水平模式

滚动容器

export function AnchorHorizontal() {  return (    <ElAnchor className={styles.anchor} offset={70} direction="horizontal">      <ElAnchorLink href="#基础用法">基础用法</ElAnchorLink>      <ElAnchorLink href="#水平模式">水平模式</ElAnchorLink>      <ElAnchorLink href="#滚动容器">滚动容器</ElAnchorLink>    </ElAnchor>  );}

滚动容器

自定义滚动区域，使用 offset props 可以设置锚点滚动偏移。监听link-click事件并阻止浏览器的默认行为，从而不会更改历史记录。

Fixed Top Block

part1

part2

part3

part1

part2

part3

export function AnchorScroll() {  const [containerEl, setContainerEl] = useState<HTMLDivElement | null>(null);  return (    <div>      <ElRow className={styles.scrollRow}>        <ElCol span={18}>          <div            style={{              height: 30,              width: "70%",              background: "#000",              position: "absolute",              top: 0,              left: 0,              color: "#fff",            }}          >            Fixed Top Block          </div>          <div ref={setContainerEl} style={{ height: 300, overflowY: "auto" }}>            <div              id="part1"              style={{                height: 300,                background: "rgba(255, 0, 0, 0.02)",                marginTop: 30,              }}            >              part1            </div>            <div              id="part2"              style={{                height: 300,                background: "rgba(0, 255, 0, 0.02)",                marginTop: 30,              }}            >              part2            </div>            <div              id="part3"              style={{                height: 300,                background: "rgba(0, 0, 255, 0.02)",                marginTop: 30,              }}            >              part3            </div>          </div>        </ElCol>        <ElCol span={6}>          <div className="vp-raw">            <ElAnchor              className={styles.anchor}              container={containerEl}              direction="vertical"              type="default"              offset={30}              onClick={(event) => event.preventDefault()}            >              <ElAnchorLink href="#part1" title="part1" />              <ElAnchorLink href="#part2" title="part2" />              <ElAnchorLink href="#part3" title="part3" />            </ElAnchor>          </div>        </ElCol>      </ElRow>    </div>  );}

锚点链接变化

监听锚点链接变化

export function AnchorChange() {  return (    <ElAnchor      className={styles.anchor}      offset={70}      onChange={(href) => {        console.log("anchor change:", href);      }}    >      <ElAnchorLink href="#基础用法">基础用法</ElAnchorLink>      <ElAnchorLink href="#水平模式">水平模式</ElAnchorLink>      <ElAnchorLink href="#滚动容器">滚动容器</ElAnchorLink>      <ElAnchorLink        href="#anchor-api"        subLink={          <>            <ElAnchorLink href="#anchor-attributes">Anchor Attributes</ElAnchorLink>            <ElAnchorLink href="#anchor-events">Anchor Events</ElAnchorLink>          </>        }      >        Anchor API      </ElAnchorLink>    </ElAnchor>  );}

下划线类型

设置type="underline"以更改为下划线类型

export function AnchorUnderline() {  return (    <ElAnchor className={styles.anchor} type="underline" offset={70}>      <ElAnchorLink href="#基础用法">基础用法</ElAnchorLink>      <ElAnchorLink href="#水平模式">水平模式</ElAnchorLink>      <ElAnchorLink href="#滚动容器">滚动容器</ElAnchorLink>      <ElAnchorLink        href="#anchor-api"        subLink={          <>            <ElAnchorLink href="#anchor-attributes">Anchor Attributes</ElAnchorLink>            <ElAnchorLink href="#anchor-events">Anchor Events</ElAnchorLink>          </>        }      >        Anchor API      </ElAnchorLink>    </ElAnchor>  );}

固定模式

使用 affix 组件来固定住页面中的锚点。

export function AnchorAffix() {  return (    <ElAffix offset={60}>      <ElAnchor        className={styles.anchor}        offset={70}        style={{ width: 300 }}      >        <ElAnchorLink href="#基础用法">基础用法</ElAnchorLink>        <ElAnchorLink href="#水平模式">水平模式</ElAnchorLink>        <ElAnchorLink href="#滚动容器">滚动容器</ElAnchorLink>        <ElAnchorLink          href="#anchor-api"          subLink={            <>              <ElAnchorLink href="#anchor-attributes">Anchor Attributes</ElAnchorLink>              <ElAnchorLink href="#anchor-events">Anchor Events</ElAnchorLink>            </>          }        >          Anchor API        </ElAnchorLink>      </ElAnchor>    </ElAffix>  );}

Anchor API

Anchor Attributes

属性名	说明	类型	默认值
container	滚动容器	`string` / `HTMLElement` / `Window`	window
offset	锚点滚动的偏移量	`number`	0
bound	元素开始触发锚点切换的偏移量	`number`	15
duration	容器滚动时长，毫秒	`number`	300
marker	是否显示滑块	`boolean`	true
type	锚点类型	`enum`	default
direction	锚点方向	`enum`	vertical
select-scroll-top 2.9.2	滚动到顶部时是否选中链接	`boolean`	false
class-name / style	根元素类名与样式	`string` / `object`	—

Anchor Events

事件名	说明	参数
onChange	当前锚点变化时触发，对应官方 change	`Function`
onClick	用户点击链接时触发	`Function`

Anchor Exposes

名称	说明	类型
scrollTo	手动滚动到指定位置	`Function`

通过 ref 拿到 expose：const ref = useRef<AnchorExpose>(null)，再调用 ref.current?.scrollTo("#id")。

Anchor Slots

插槽名	说明	React 写法
default	AnchorLink 组件列表	`children`

AnchorLink Attributes

属性名	说明	类型	默认值
title	锚点链接的文字内容	`string`	—
href	锚点的地址	`string`	—

AnchorLink Slots

插槽名	说明	React 写法
default	锚点链接的内容，优先于 `title`	`children`
sub-link	子链接	`subLink` 属性