fix: 【website】锚点随页面滚动定位

antdpro · Aug 22, 2023 · e466ec1 · e466ec1
1 parent b035b71
commit e466ec1
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 16 deletions.
diff --git a/examples/website/src/components/Preview/Anchor/index.jsx b/examples/website/src/components/Preview/Anchor/index.jsx
@@ -42,16 +42,36 @@ const convertMarkdownToItems = (markdown) => {
 
 export default function Anchors({ markdownText }) {
   const [items, setItems] = useState([]);
+  const [activeAnchor, setActiveAnchor] = useState('');
+  useEffect(() => {
+    const handleScroll = () => {
+      const headings = document.querySelectorAll('h2');
+      let currentAnchor = '';
+      for (const heading of headings) {
+        const { top } = heading.getBoundingClientRect();
+        if (top <= 0) {
+          currentAnchor = heading.id;
+        }
+      }
+
+      setActiveAnchor(currentAnchor);
+    };
+    document.addEventListener('scroll', handleScroll, true);
+    return () => {
+      document.removeEventListener('scroll', handleScroll, true);
+    };
+  }, []);
+
   useEffect(() => {
     if (markdownText) {
       const items = convertMarkdownToItems(markdownText);
       setItems(items);
     }
   }, [markdownText]);
-
   return (
     <Anchor
       items={items}
+      getCurrentAnchor={() => activeAnchor}
       onClick={(e, link) => {
         e.preventDefault();
         const element = document.getElementById(link.href);

diff --git a/examples/website/src/components/Preview/index.tsx b/examples/website/src/components/Preview/index.tsx
@@ -67,7 +67,6 @@ const PreviewDocument = ({
   const $dom = useRef<HTMLDivElement>(null);
   const { mdData, loading } = useMdData(path);
   useHyperlink($dom.current);
-
   return (
     <Wrapper ref={$dom}>
       <Loading loading={loading}>

diff --git a/examples/website/src/pages/quick-start/README.md b/examples/website/src/pages/quick-start/README.md
@@ -31,31 +31,21 @@ $ pnpm -v
 
 ## 创建ts项目
 ```shell 
-# npm 6.x
 $ npm init antdp my-app --example basic
-# npm 7+, extra double-dash is needed:
 $ npm init antdp my-app -- --example basic
-
 $ yarn create antdp [appName]
-# or npm
 $ npm create antdp my-app
-# or npx
 $ npx create-antdp my-app
 ```
 
 或者直接下载: [`basic.zip`](https://antdpro.github.io/antdp/zip/basic.zip)
 
-### 创建js项目
+## 创建js项目
 ```shell
-# npm 6.x
 $ npm init antdp my-app --example basicjs
-# npm 7+，extra double-dash is needed:
 $ npm init antdp my-app -- --example basicjs
-
 $ yarn create antdp [appName] -- --example basicjs
-# or npm
 $ npm create antdp my-app -- --example basicjs
-# or npx
 $ npx create-antdp my-app -- --example basicjs
 ```
 或者直接下载版本: [`basicjs.zip`](https://antdpro.github.io/antdp/zip/basicjs.zip)

diff --git a/packages/antdp/README.md b/packages/antdp/README.md
@@ -8,9 +8,6 @@ Ant Design Project
 
 [![Ant Design Project](https://user-images.githubusercontent.com/59959718/262203847-d1612c3c-a37e-47fa-8282-dba85a8366be.png)](https://stackblitz.com/github/antdpro/antdp/tree/master/examples/antdp-base?embed=1&hideNavigation=0&hidedevtools=0)
 
-[![Ant Design Project](https://user-images.githubusercontent.com/59959718/262203891-ba31a1c0-84ad-42ae-8e0f-447b81ab9439.png)](https://stackblitz.com/github/antdpro/antdp/tree/master/examples/antdp-base?embed=1&hideNavigation=0&hidedevtools=0)
-
-[![Ant Design Project](https://user-images.githubusercontent.com/59959718/262203911-58268a5b-a948-4909-87cc-bd6b4a6b8d1f.png)](https://stackblitz.com/github/antdpro/antdp/tree/master/examples/antdp-base?embed=1&hideNavigation=0&hidedevtools=0)
 
 ### Features