fix: 修复最后一个锚点下内容超过一屏时，对应的导航无法点亮的问题 (#49)

* chore: 修复 demo 在携带 hash（锚点）进入时，因为数据延迟加载，并没有定位到锚点的问题

* chore: 调整 demo 覆盖情况不完善的问题

* fix: 修复最后一个锚点下内容超过一屏时，对应的导航无法点亮的问题

---------

Co-authored-by: jixianjing <xianjing.ji@mail.hypers.com>

docs/component/content.js

@@ -2,6 +2,16 @@ import React, { useState, useEffect } from 'react';
 import { Markdown } from 'markdownloader';
 import { Table } from 'rsuite';
 
+function scrollIntoView() {
+  if (location.hash) {
+    try {
+      document.querySelector(decodeURIComponent(location.hash)).scrollIntoView();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+
 const Content = () => {
   const [showDemo, toggleShow] = useState(false);
   const [tableData, setTableData] = useState([]);
@@ -26,6 +36,10 @@ const Content = () => {
     return () => clearInterval(timer);
   }, []);
 
+  useEffect(() => {
+    scrollIntoView();
+  });
+
   return (
     <div
       style={{
@@ -45,7 +59,7 @@ const Content = () => {
         </div>
       </div>
       <h2>通过设置 deep 参数，使复杂的 DOM 树不会影响性能</h2>
-      <div>
+      <div style={{ height: 1000 }}>
         <Table
           data={tableData}
           locale={{

src/Nav.js

@@ -144,20 +144,21 @@ class Nav extends React.PureComponent<Props, State> {
     }
     this.scrollListener = throttle(() => {
       const { basePath } = this.props;
-      let index = 0;
       const { activeAnchor } = this.state;
-      elList.find((el, i) => {
+      const index = elList.findIndex((el, i) => {
         if (!el) {
           return false;
         }
         const position = el.getBoundingClientRect();
-        index = i;
         // 在 windows 电脑中点击锚点跳转后定位的元素，它的 position.top 不是 0，而是一个大于 0 小于 1 的数，所有需要减去 1，来兼容这种情况
-        // 而在 mac 电脑中这个值为 0，0 本来就不大于 0，所以即使减去 1 也对原有的逻辑没有影响，实际情况中也不会存在锚点行高为 1 的元素
+        // 而在 mac 电脑中这个值为 0，0 本来就不大于 0，所以即使减去 1 也对原有的逻辑没有影响，原有逻辑不减 1
+        // 实际情况中也不会存在锚点高度为 1且与下个锚点没有间隙的锚点
         return position.top - 1 > 0;
       });
-      // 第一个 position.top 大于 0 的元素，它的上一个元素便是需要被激活的导航
-      const nextAnchor = anchors[index - 1] || anchors[0];
+      // 第一个 position.top 大于 0 的元素且它的索引大于 0，它的上一个元素便是需要被激活的导航，
+      // 当找到节点的索引为 0 时，直接取该索引，当找不到时，说明所有锚点都在窗口上方，直接取最后一个锚点
+      const nextAnchor =
+        index > 0 ? anchors[index - 1] : index === 0 ? anchors[0] : anchors[anchors.length - 1];
       if (nextAnchor !== activeAnchor && this.pageNav) {
         this.setState({
           activeAnchor: nextAnchor