实现一个锚点组件，页面滚动时高亮当前位置锚点、点击锚点时跳转到指定冒点位置，同时选中锚点也高亮

效果图

父组件

import './index.less';
import Anchor from './Anchor';
import Content from './Content';

export default function index() {
  return (
    <div className="wrapper">
      <div className="header"></div>
      <div className="content-wrapper">
        // 锚点组件
        <Anchor />
        // 页面内容组件
        <Content />
      </div>
      <div className="footer"></div>
    </div>
  );
} 

锚点组件

import React, { useState, useEffect, useRef } from 'react';

export default function Anchor() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const isClickRef = useRef<any>(null);
  const timerRef = useRef<any>(null);
  const anchorList = ['anchor-1', 'anchor-2', 'anchor-3', 'anchor-4'];

  function onClickAnchor(item: string, index: number) {
    const el = document.querySelector(`#${item}`) as HTMLElement;
    if (el) {
      window.scroll({
        top: el.offsetTop - 130,
        behavior: 'smooth',
      });
    }
    setCurrentIndex(index);
    // 点击时设置为true,为了防止同时执行滚动事件
    isClickRef.current = true;
    // 清除定时器，防止滚动事件触发、出现走马灯闪烁问题
    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      isClickRef.current = false;
    }, 1000);
  }

  function handlerScroll() {
    // 点击锚点时，不执行滚动函数
    if (isClickRef.current) return;
    // 获取滚动容器的滚动高度（这里相对于body滚动的）
    const scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    // 获取所有content的item集合
    const contentList = document.querySelectorAll('.content div') as any;
    const offsetTopArr: any = [];
    contentList?.forEach((item: any) => {
      // 获取每个content中item的offsetTop
      offsetTopArr.push(item.offsetTop);
    });
    for (let i = 0; i < offsetTopArr.length; i++) {
      // 当滚动条高度达到对应content中item的滚动高度、则将锚点设置为高亮状态
      if (scrollTop + 120 >= offsetTopArr[i]) {
        setCurrentIndex(i);
      }
    }
  }
  useEffect(() => {
    window.addEventListener('scroll', handlerScroll);
    return () => {
      window.removeEventListener('scroll', handlerScroll);
    };
  }, []);

  return (
    <div className="anchor-wrapper">
      {anchorList?.map((item, index) => (
        <div
          key={item}
          className={`${currentIndex === index && 'active'} item`}
          onClick={() => onClickAnchor(item, index)}
        >
          {item}
        </div>
      ))}
      <div
        className={`slide-bar slide-bar-${currentIndex}`}
        style={{ top: `${currentIndex * 60}px` }}
      ></div>
    </div>
  );
}

页面内容组件

import React from 'react';

export default function Content() {
  const contentList = [
    { id: 'anchor-1', content: 'content-1' },
    { id: 'anchor-2', content: 'content-2' },
    { id: 'anchor-3', content: 'content-3' },
    { id: 'anchor-4', content: 'content-4' },
  ];
  return (
    <div className="content">
      {contentList?.map((item, index) => (
        <div key={index} id={item.id} className="item">
          {item.content}
        </div>
      ))}
    </div>
  );
}

index.less样式文件

.wrapper {
  .header,
  .footer {
    background-color: orange;
  }
  .header {
    // 固定头部
    position: sticky;
    top: 0;
    height: 100px;
  }
  .footer {
    height: 240px;
  }

  .content-wrapper {
    .anchor-wrapper {
      width: 170px;
      float: left;
      position: sticky;
      top: 110px;
      padding: 0 10px;
      border-left: 4px solid #e0e0e0;
      margin: 10px;
      .item {
        padding: 20px 0;
        cursor: pointer;
      }
      .item.active {
        color: #082b6e;
      }

      .slide-bar {
        position: absolute;
        height: 60px;
        width: 4px;
        left: -4px;
        background-color: #082b6e;
        transition: all 0.2s linear;
      }
      .slide-bar-2,
      .slide-bar-3 {
        transform: translateY(6px);
      }
    }

    .content {
      width: calc(100% - 200px);
      margin-left: 200px;
      .item {
        height: 600px;
        font-size: 24px;
        border: 1px solid red;
      }
    }
  }
}