滚动条定位到指定位置（类似锚点的功能）

工作中产品经常甩一句懒洋洋的话来“我要点击这个，帮我滚动到那个~”，我就想，你不会自己滚动鼠标啊【白眼】。 但是话又说回来，身为打工人的我是不敢顶嘴的，毕竟饭碗要紧。人活着不得不吃饭吧。嘿嘿嘿 今天做个总结，把我经常写的丝滑滚动做一下笔记，后面我直接cv，就可以到点下班啦~~~

1. jsx

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

export default () => {
  const containerRef = useRef(null);
  
  
  const [isFixed, setIsFixed] = useState(false); // 判断是否已经吸顶
  const handleScroll = (e) => {
    console.log(e);
    console.log(
      '浏览器滚动事件',
      e.srcElement.scrollTop,
      e.srcElement.scrollHeight,
      '----------------------------------------------'
    );
    // e.srcElement.scrollingElement.scrollTop为距离滚动条顶部高度
    // e.srcElement.scrollingElement.scrollHeight为整个文档高度
    if (e.srcElement.scrollTop > tabRef1.current?.offsetTop) {
      setIsFixed(true);
    } else {
      setIsFixed(false);
    }
  };
   useEffect(() => {
    containerRef.current?.addEventListener('scroll', handleScroll); // 监听滚动，看到某个为止需不需要吸顶
  }, []);
  
  const onChange = (tab, e) => {
    const distance = eval(`tabRef${tab}`);
    containerRef.current?.scrollTo({  
      top: distance.current?.offsetTop,  // 滚动到某个元素的位置
      behavior: 'smooth',
    });
  };
  
  
  return <div style={{ height: '100%', overflow: 'auto' }} ref={containerRef}>
                  很多内容
        <div
        className={styles.tabsBoxWrap}
        style={{
          width: isFixed ? '100vw' : '100%',
          position: isFixed ? 'fixed' : 'initial',
        }}>
        <div className={styles.tabsBox}>
          <Tabs
            defaultActiveKey="1"
            tabBarGutter={'96px'}
            tabBarStyle={tabsStyle}
            items={items}
            onChange={(v, e) => onChange(v, e)}
          />
        </div>
      </div>
            <div ref={tabRef1} className={styles.tabs_1_content}>111</div>
            <div ref={tabRef1} className={styles.tabs_1_content}>222</div>
            <div ref={tabRef1} className={styles.tabs_1_content}>333</div>


       <div>
       }