博客

介绍


vue3

中，封装监听页面滚动的

js

， 及页面滚动到一定像素时，显示返回顶部的按钮，点击按钮会有放大的动画，并逐渐滚动到顶部的组件。效果如下：

代码

1. 封装js，监听屏幕滚动事件，以及是否显示返回顶部的按钮；
   
   在项目目录下新建
   
utils

   文件夹，并在该文件夹下创建
   
index.js

   文件；在这文件里写全局通用的一些方法；现在需要用到的返回顶部的方法就写这里面。

/**
 * @监听屏幕滚动式时，是否显示返回顶部的按钮
 * @return { boolean } 返回结果为布尔类型
 **/
export const startScroll = () => {
   
  // 定义是否显示 返回顶部的按钮
  let scroll= document.documentElement.scrollTop  // //获取页面纵坐标的滚动条位置
  let visibleHeight =document.documentElement.clientHeight || document.body.clientHeight // 页面能见的高度
  console.log(scroll,visibleHeight)
  // 当页面滚动的距离大于可见的高度时，显示返回到顶部的按钮
  return scroll >= visibleHeight ? true : false;
}

// back to top
export const backToTop = () => {
   
  let timer = null;
  timer=setInterval(function (){
   
    //获取网页被卷去的高度
    let backTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    //  调节向上的速度
    let speed=backTop/5;
    document.documentElement.scrollTop = backTop-speed;