完成效果:
实现思路:
通过 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);
}