react置顶

 1.先设置监听器和方法

 const divRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = divRef.current.scrollTop;
      // 处理滚动条高度变化的逻辑
      console.log('滚动条高度:', scrollTop);
    };

    divRef.current.addEventListener('scroll', handleScroll);

    return () => {
      divRef.current.removeEventListener('scroll', handleScroll);
    };
  }, []);


 const handleScroll = () => {
        if (divRef.current.pageYOffset > 100) {
            setShowButton(true);
        } else {
            setShowButton(false);
        }
    };

    const handleClick = () => {
        divRef.current.scrollTo({
            top: 0,
            behavior: 'smooth',
        });
    };

2.给要置顶的模块设置ref属性

<div  ref={divRef} className={style['home-content']}>
内容
<div>

3.给按钮添加点击事件

<div  className={style['zhiding']} onClick={handleClick}>
  置顶
</div>