Anchor

Hyperlinks to scroll on one page.

When To Use#

For displaying anchor hyperlinks on page and jumping between them.

Notes for developers
After version 4.24.0, we rewrite Anchor use FC, Some methods of obtaining ref and calling internal instance methods will invalid.

Examples

The simplest usage.

TypeScript
JavaScript
import { Anchor } from 'antd';
import React from 'react';

const { Link } = Anchor;

const App: React.FC = () => (
  <Anchor>
    <Link href="#components-anchor-demo-basic" title="Basic demo" />
    <Link href="#components-anchor-demo-static" title="Static demo" />
    <Link href="#API" title="API">
      <Link href="#Anchor-Props" title="Anchor Props" />
      <Link href="#Link-Props" title="Link Props" />
    </Link>
  </Anchor>
);

export default App;

Customize the onClick event

Clicking on an anchor does not record history.

TypeScript
JavaScript
import { Anchor } from 'antd';
import React from 'react';

const { Link } = Anchor;

const handleClick = (
  e: React.MouseEvent<HTMLElement>,
  link: {
    title: React.ReactNode;
    href: string;
  },
) => {
  e.preventDefault();
  console.log(link);
};

const App: React.FC = () => (
  <Anchor affix={false} onClick={handleClick}>
    <Link href="#components-anchor-demo-basic" title="Basic demo" />
    <Link href="#components-anchor-demo-static" title="Static demo" />
    <Link href="#API" title="API">
      <Link href="#Anchor-Props" title="Anchor Props" />
      <Link href="#Link-Props" title="Link Props" />
    </Link>
  </Anchor>
);

export default App;

Set Anchor scroll offset

Anchor target scroll to screen center.

TypeScript
JavaScript
import { Anchor } from 'antd';
import React, { useEffect, useState } from 'react';

const { Link } = Anchor;

const App: React.FC = () => {
  const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);

  useEffect(() => {
    setTargetOffset(window.innerHeight / 2);
  }, []);

  return (
    <Anchor targetOffset={targetOffset}>
      <Link href="#components-anchor-demo-basic" title="Basic demo" />
      <Link href="#components-anchor-demo-static" title="Static demo" />
      <Link href="#API" title="API">
        <Link href="#Anchor-Props" title="Anchor Props" />
        <Link href="#Link-Props" title="Link Props" />
      </Link>
    </Anchor>
  );
};

export default App;

Do not change state when page is scrolling.

TypeScript
JavaScript
import { Anchor } from 'antd';
import React from 'react';

const { Link } = Anchor;

const App: React.FC = () => (
  <Anchor affix={false}>
    <Link href="#components-anchor-demo-basic" title="Basic demo" />
    <Link href="#components-anchor-demo-static" title="Static demo" />
    <Link href="#API" title="API">
      <Link href="#Anchor-Props" title="Anchor Props" />
      <Link href="#Link-Props" title="Link Props" />
    </Link>
  </Anchor>
);

export default App;

Customize the anchor highlight

Customize the anchor highlight.

TypeScript
JavaScript
import { Anchor } from 'antd';
import React from 'react';

const { Link } = Anchor;

const getCurrentAnchor = () => '#components-anchor-demo-static';

const App: React.FC = () => (
  <Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
    <Link href="#components-anchor-demo-basic" title="Basic demo" />
    <Link href="#components-anchor-demo-static" title="Static demo" />
    <Link href="#API" title="API">
      <Link href="#Anchor-Props" title="Anchor Props" />
      <Link href="#Link-Props" title="Link Props" />
    </Link>
  </Anchor>
);

export default App;

Listening for anchor link change

Listening for anchor link change.

TypeScript
JavaScript
import { Anchor } from 'antd';
import React from 'react';

const { Link } = Anchor;

const onChange = (link: string) => {
  console.log('Anchor:OnChange', link);
};

const App: React.FC = () => (
  <Anchor affix={false} onChange={onChange}>
    <Link href="#components-anchor-demo-basic" title="Basic demo" />
    <Link href="#components-anchor-demo-static" title="Static demo" />
    <Link href="#API" title="API">
      <Link href="#Anchor-Props" title="Anchor Props" />
      <Link href="#Link-Props" title="Link Props" />
    </Link>
  </Anchor>
);

export default App;

API#

Anchor Props#

Property	Description	Type	Default
affix	Fixed mode of Anchor	boolean	true
bounds	Bounding distance of anchor area	number	5
getContainer	Scrolling container	() => HTMLElement	() => window
getCurrentAnchor	Customize the anchor highlight	(activeLink: string) => string	-
offsetTop	Pixels to offset from top when calculating position of scroll	number	0
showInkInFixed	Whether show ink-balls when `affix={false}`	boolean	false
targetOffset	Anchor scroll offset, default as `offsetTop`, example	number	-
onChange	Listening for anchor link change	(currentActiveLink: string) => void
onClick	Set the handler to handle `click` event	function(e: Event, link: Object)	-

Link Props#

Property	Description	Type
href	The target of hyperlink	string
target	Specifies where to display the linked URL	string
title	The content of hyperlink	ReactNode