diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx
index 6efd27e199..0d08f5fc9f 100644
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@@ -35,16 +35,6 @@ const useStyle = () => {
         ${antCls}-anchor-link-title {
           font-size: 12px;
         }
-
-        ${antCls}-anchor-ink-ball {
-          left: 0;
-          width: ${token.lineWidthBold}px;
-          height: ${token.fontSizeSM * token.lineHeightSM}px;
-          margin-top: ${token.marginXXS}px;
-          background-color: ${token.colorPrimary};
-          border: none;
-          transform: translateY(-50%);
-        }
       }
     `,
     tocWrapper: css`
diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md
index 5fe0f82739..429ccb47ce 100644
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@@ -5,8 +5,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
 demo:
   cols: 2
 group:
-  title: Navigation
-  order: 3
+  title: Other
+  order:
 ---
 
 Wrap Affix around another component to make it stick the viewport.
diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md
index f3d2095e7d..da210ebbd0 100644
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@@ -6,8 +6,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
 demo:
   cols: 2
 group:
-  title: 导航
-  order: 3
+  title: 其他
+  order: 7
 ---
 
 将页面元素钉在可视范围。
diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index 2dd362a736..9c377a3324 100644
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -90,7 +90,7 @@ export interface AntAnchor {
   ) => void;
 }
 
-const AnchorContent: React.FC<InternalAnchorProps> = props => {
+const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
   const {
     rootClassName,
     anchorPrefixCls: prefixCls,
@@ -123,18 +123,18 @@ const AnchorContent: React.FC<InternalAnchorProps> = props => {
   const dependencyListItem: React.DependencyList[number] = JSON.stringify(links);
 
   const registerLink = React.useCallback<AntAnchor['registerLink']>(
-    link => {
+    (link) => {
       if (!links.includes(link)) {
-        setLinks(prev => [...prev, link]);
+        setLinks((prev) => [...prev, link]);
       }
     },
     [dependencyListItem],
   );
 
   const unregisterLink = React.useCallback<AntAnchor['unregisterLink']>(
-    link => {
+    (link) => {
       if (links.includes(link)) {
-        setLinks(prev => prev.filter(i => i !== link));
+        setLinks((prev) => prev.filter((i) => i !== link));
       }
     },
     [dependencyListItem],
@@ -145,14 +145,15 @@ const AnchorContent: React.FC<InternalAnchorProps> = props => {
       `.${prefixCls}-link-title-active`,
     );
     if (linkNode && spanLinkNode.current) {
-      spanLinkNode.current.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
+      spanLinkNode.current.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2}px`;
+      spanLinkNode.current.style.height = `${linkNode.clientHeight}px`;
     }
   };
 
   const getInternalCurrentAnchor = (_links: string[], _offsetTop = 0, _bounds = 5): string => {
     const linkSections: Section[] = [];
     const container = getCurrentContainer();
-    _links.forEach(link => {
+    _links.forEach((link) => {
       const sharpLinkMatch = sharpMatcherRegx.exec(link?.toString());
       if (!sharpLinkMatch) {
         return;
@@ -204,7 +205,7 @@ const AnchorContent: React.FC<InternalAnchorProps> = props => {
   }, [dependencyListItem, targetOffset, offsetTop]);
 
   const handleScrollTo = React.useCallback<(link: string) => void>(
-    link => {
+    (link) => {
       setCurrentActiveLink(link);
       const container = getCurrentContainer();
       const scrollTop = getScroll(container, true);
@@ -310,7 +311,7 @@ const AnchorContent: React.FC<InternalAnchorProps> = props => {
   );
 };
 
-const Anchor: React.FC<AnchorProps> = props => {
+const Anchor: React.FC<AnchorProps> = (props) => {
   const { prefixCls: customizePrefixCls } = props;
   const { getPrefixCls } = React.useContext<ConfigConsumerProps>(ConfigContext);
   const anchorPrefixCls = getPrefixCls('anchor', customizePrefixCls);
diff --git a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap
index 234eafeef4..582b236f77 100644
--- a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -46,7 +46,7 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`]
         >
           <a
             class="ant-anchor-link-title"
-            href="#API"
+            href="#api"
             title="API"
           >
             API
@@ -56,7 +56,7 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`]
           >
             <a
               class="ant-anchor-link-title"
-              href="#Anchor-Props"
+              href="#anchor-props"
               title="Anchor Props"
             >
               Anchor Props
@@ -67,7 +67,7 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`]
           >
             <a
               class="ant-anchor-link-title"
-              href="#Link-Props"
+              href="#link-props"
               title="Link Props"
             >
               Link Props
@@ -122,7 +122,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx extend context
     >
       <a
         class="ant-anchor-link-title"
-        href="#API"
+        href="#api"
         title="API"
       >
         API
@@ -132,7 +132,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx extend context
       >
         <a
           class="ant-anchor-link-title"
-          href="#Anchor-Props"
+          href="#anchor-props"
           title="Anchor Props"
         >
           Anchor Props
@@ -143,7 +143,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx extend context
       >
         <a
           class="ant-anchor-link-title"
-          href="#Link-Props"
+          href="#link-props"
           title="Link Props"
         >
           Link Props
@@ -196,7 +196,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx extend context correctly
     >
       <a
         class="ant-anchor-link-title"
-        href="#API"
+        href="#api"
         title="API"
       >
         API
@@ -206,7 +206,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx extend context correctly
       >
         <a
           class="ant-anchor-link-title"
-          href="#Anchor-Props"
+          href="#anchor-props"
           title="Anchor Props"
         >
           Anchor Props
@@ -217,7 +217,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx extend context correctly
       >
         <a
           class="ant-anchor-link-title"
-          href="#Link-Props"
+          href="#link-props"
           title="Link Props"
         >
           Link Props
@@ -270,7 +270,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx extend context correctly 1
     >
       <a
         class="ant-anchor-link-title"
-        href="#API"
+        href="#api"
         title="API"
       >
         API
@@ -280,7 +280,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx extend context correctly 1
       >
         <a
           class="ant-anchor-link-title"
-          href="#Anchor-Props"
+          href="#anchor-props"
           title="Anchor Props"
         >
           Anchor Props
@@ -291,7 +291,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx extend context correctly 1
       >
         <a
           class="ant-anchor-link-title"
-          href="#Link-Props"
+          href="#link-props"
           title="Link Props"
         >
           Link Props
@@ -344,7 +344,7 @@ exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1`
     >
       <a
         class="ant-anchor-link-title"
-        href="#API"
+        href="#api"
         title="API"
       >
         API
@@ -354,7 +354,7 @@ exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1`
       >
         <a
           class="ant-anchor-link-title"
-          href="#Anchor-Props"
+          href="#anchor-props"
           title="Anchor Props"
         >
           Anchor Props
@@ -365,7 +365,7 @@ exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1`
       >
         <a
           class="ant-anchor-link-title"
-          href="#Link-Props"
+          href="#link-props"
           title="Link Props"
         >
           Link Props
@@ -422,7 +422,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correc
         >
           <a
             class="ant-anchor-link-title"
-            href="#API"
+            href="#api"
             title="API"
           >
             API
@@ -432,7 +432,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correc
           >
             <a
               class="ant-anchor-link-title"
-              href="#Anchor-Props"
+              href="#anchor-props"
               title="Anchor Props"
             >
               Anchor Props
@@ -443,7 +443,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correc
           >
             <a
               class="ant-anchor-link-title"
-              href="#Link-Props"
+              href="#link-props"
               title="Link Props"
             >
               Link Props
diff --git a/components/anchor/__tests__/__snapshots__/demo.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo.test.ts.snap
index cbae92429d..2b3a5ebb0f 100644
--- a/components/anchor/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/anchor/__tests__/__snapshots__/demo.test.ts.snap
@@ -46,7 +46,7 @@ exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
         >
           <a
             class="ant-anchor-link-title"
-            href="#API"
+            href="#api"
             title="API"
           >
             API
@@ -56,7 +56,7 @@ exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
           >
             <a
               class="ant-anchor-link-title"
-              href="#Anchor-Props"
+              href="#anchor-props"
               title="Anchor Props"
             >
               Anchor Props
@@ -67,7 +67,7 @@ exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
           >
             <a
               class="ant-anchor-link-title"
-              href="#Link-Props"
+              href="#link-props"
               title="Link Props"
             >
               Link Props
@@ -122,7 +122,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx correctly 1`] =
     >
       <a
         class="ant-anchor-link-title"
-        href="#API"
+        href="#api"
         title="API"
       >
         API
@@ -132,7 +132,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx correctly 1`] =
       >
         <a
           class="ant-anchor-link-title"
-          href="#Anchor-Props"
+          href="#anchor-props"
           title="Anchor Props"
         >
           Anchor Props
@@ -143,7 +143,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx correctly 1`] =
       >
         <a
           class="ant-anchor-link-title"
-          href="#Link-Props"
+          href="#link-props"
           title="Link Props"
         >
           Link Props
@@ -196,7 +196,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#API"
+        href="#api"
         title="API"
       >
         API
@@ -206,7 +206,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx correctly 1`] = `
       >
         <a
           class="ant-anchor-link-title"
-          href="#Anchor-Props"
+          href="#anchor-props"
           title="Anchor Props"
         >
           Anchor Props
@@ -217,7 +217,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx correctly 1`] = `
       >
         <a
           class="ant-anchor-link-title"
-          href="#Link-Props"
+          href="#link-props"
           title="Link Props"
         >
           Link Props
@@ -270,7 +270,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#API"
+        href="#api"
         title="API"
       >
         API
@@ -280,7 +280,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx correctly 1`] = `
       >
         <a
           class="ant-anchor-link-title"
-          href="#Anchor-Props"
+          href="#anchor-props"
           title="Anchor Props"
         >
           Anchor Props
@@ -291,7 +291,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx correctly 1`] = `
       >
         <a
           class="ant-anchor-link-title"
-          href="#Link-Props"
+          href="#link-props"
           title="Link Props"
         >
           Link Props
@@ -344,7 +344,7 @@ exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#API"
+        href="#api"
         title="API"
       >
         API
@@ -354,7 +354,7 @@ exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = `
       >
         <a
           class="ant-anchor-link-title"
-          href="#Anchor-Props"
+          href="#anchor-props"
           title="Anchor Props"
         >
           Anchor Props
@@ -365,7 +365,7 @@ exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = `
       >
         <a
           class="ant-anchor-link-title"
-          href="#Link-Props"
+          href="#link-props"
           title="Link Props"
         >
           Link Props
@@ -422,7 +422,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx correctly 1`] = `
         >
           <a
             class="ant-anchor-link-title"
-            href="#API"
+            href="#api"
             title="API"
           >
             API
@@ -432,7 +432,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx correctly 1`] = `
           >
             <a
               class="ant-anchor-link-title"
-              href="#Anchor-Props"
+              href="#anchor-props"
               title="Anchor Props"
             >
               Anchor Props
@@ -443,7 +443,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx correctly 1`] = `
           >
             <a
               class="ant-anchor-link-title"
-              href="#Link-Props"
+              href="#link-props"
               title="Link Props"
             >
               Link Props
diff --git a/components/anchor/demo/basic.tsx b/components/anchor/demo/basic.tsx
index 10e3176852..2280a74ec9 100644
--- a/components/anchor/demo/basic.tsx
+++ b/components/anchor/demo/basic.tsx
@@ -7,9 +7,9 @@ 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 href="#api" title="API">
+      <Link href="#anchor-props" title="Anchor Props" />
+      <Link href="#link-props" title="Link Props" />
     </Link>
   </Anchor>
 );
diff --git a/components/anchor/demo/customizeHighlight.tsx b/components/anchor/demo/customizeHighlight.tsx
index ee98731416..e746c2518d 100644
--- a/components/anchor/demo/customizeHighlight.tsx
+++ b/components/anchor/demo/customizeHighlight.tsx
@@ -9,9 +9,9 @@ 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 href="#api" title="API">
+      <Link href="#anchor-props" title="Anchor Props" />
+      <Link href="#link-props" title="Link Props" />
     </Link>
   </Anchor>
 );
diff --git a/components/anchor/demo/onChange.tsx b/components/anchor/demo/onChange.tsx
index 92ee806f61..f87d1703bb 100644
--- a/components/anchor/demo/onChange.tsx
+++ b/components/anchor/demo/onChange.tsx
@@ -11,9 +11,9 @@ 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 href="#api" title="API">
+      <Link href="#anchor-props" title="Anchor Props" />
+      <Link href="#link-props" title="Link Props" />
     </Link>
   </Anchor>
 );
diff --git a/components/anchor/demo/onClick.tsx b/components/anchor/demo/onClick.tsx
index 2299ee2fb8..ddf88d865f 100644
--- a/components/anchor/demo/onClick.tsx
+++ b/components/anchor/demo/onClick.tsx
@@ -18,9 +18,9 @@ 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 href="#api" title="API">
+      <Link href="#anchor-props" title="Anchor Props" />
+      <Link href="#link-props" title="Link Props" />
     </Link>
   </Anchor>
 );
diff --git a/components/anchor/demo/static.tsx b/components/anchor/demo/static.tsx
index 1ca0286df9..a5dabdc510 100644
--- a/components/anchor/demo/static.tsx
+++ b/components/anchor/demo/static.tsx
@@ -7,9 +7,9 @@ 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 href="#api" title="API">
+      <Link href="#anchor-props" title="Anchor Props" />
+      <Link href="#link-props" title="Link Props" />
     </Link>
   </Anchor>
 );
diff --git a/components/anchor/demo/targetOffset.tsx b/components/anchor/demo/targetOffset.tsx
index 64d208915e..aaf0227267 100644
--- a/components/anchor/demo/targetOffset.tsx
+++ b/components/anchor/demo/targetOffset.tsx
@@ -14,9 +14,9 @@ const App: React.FC = () => {
     <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 href="#api" title="API">
+        <Link href="#anchor-props" title="Anchor Props" />
+        <Link href="#link-props" title="Link Props" />
       </Link>
     </Anchor>
   );
diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md
index e49246c388..8e9cae3c84 100644
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@@ -1,10 +1,10 @@
 ---
 category: Components
 title: Anchor
-cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
+cover: https://gw.alipayobjects.com/zos/bmw-prod/669b87c5-7b44-4c99-a5ea-4c38f8004788.svg
 group:
-  title: Other
-  order: 7
+  title: Navigation
+  order: 3
 demo:
   cols: 2
 ---
diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md
index aebddf4e38..0c3303165c 100644
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -1,14 +1,13 @@
 ---
 category: Components
 subtitle: 锚点
-cols: 2
 title: Anchor
-cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
-group:
-  title: 其他
-  order: 7
+cover: https://gw.alipayobjects.com/zos/bmw-prod/669b87c5-7b44-4c99-a5ea-4c38f8004788.svg
 demo:
   cols: 2
+group:
+  title: 导航
+  order: 3
 ---
 
 用于跳转到页面指定位置。
diff --git a/components/anchor/style/index.tsx b/components/anchor/style/index.tsx
index 6d378dbedd..5e79e62766 100644
--- a/components/anchor/style/index.tsx
+++ b/components/anchor/style/index.tsx
@@ -16,7 +16,8 @@ interface AnchorToken extends FullToken<'Anchor'> {
 
 // ============================== Shared ==============================
 const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
-  const { componentCls, holderOffsetBlock, anchorBallSize, lineWidthBold } = token;
+  const { componentCls, holderOffsetBlock, motionDurationSlow, lineWidthBold, colorPrimary } =
+    token;
 
   return {
     [`${componentCls}-wrapper`]: {
@@ -54,16 +55,13 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
           position: 'absolute',
           left: {
             _skip_check_: true,
-            value: '50%',
+            value: 0,
           },
           display: 'none',
-          width: anchorBallSize,
-          height: anchorBallSize,
-          backgroundColor: token.colorBgContainer,
-          border: `${lineWidthBold}px solid ${token.colorPrimary}`,
-          borderRadius: anchorBallSize,
-          transform: 'translateX(-50%)',
-          transition: `top ${token.motionDurationSlow} ease-in-out`,
+          transform: 'translateY(-50%)',
+          transition: `top ${motionDurationSlow} ease-in-out`,
+          width: lineWidthBold,
+          backgroundColor: colorPrimary,
 
           [`&${componentCls}-ink-ball-visible`]: {
             display: 'inline-block',
@@ -106,7 +104,7 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Anchor', token => {
+export default genComponentStyleHook('Anchor', (token) => {
   const { fontSize, fontSizeLG, padding, paddingXXS } = token;
 
   const anchorToken = mergeToken<AnchorToken>(token, {