React 监听滚动条变化，实现返回顶部效果

完成效果：        

实现思路：

        通过  window.addEventListener 来监听滚动条的变化

        window.addEventListener 有三个参数：

        第一个参数： 事件的类型 ，我们用的scorll

        第二个参数： 监听事件后，处理的函数

        第三个参数：布尔型，默认false （设置为true只在捕获阶段处理事件）

        使用hooks方法导入useRef, 给盒子绑定ref‘’

        通过  .current.scrollTop 获取页面到顶部的距离在做一系列操作

代码：

        

 给最外层盒子绑定ref

 

    const liha = useRef(null) //创建useRef 
    

    useEffect(() => {
        let one = window.addEventListener("scroll", scorePOI, true) //监听滚动条变化
        return () => {
            window.removeEventListener(one) //清除监听
        }
    }, [])
    //监听到滚动条变化，处理的函数
    function scorePOI() {
        if (liha.current.scrollTop > 0) {
            setzhan(true) //展示返回顶部按钮
        } else { 
            setzhan(false) //隐藏返回顶部按钮
        }
    }

    // 点击返回顶部触发的函数

    function fanhui() {
        let urlpoi = setInterval(() => {
            liha.current.scrollTop -= 5 //每次减5 ,有缓慢的效果
            if(liha.current.scrollTop === 0){ //如果已经返回到顶部 就清除定时器
                clearInterval(urlpoi)
            }
        }, 1);
    }