最新推荐文章于 2024-07-29 11:24:35 发布

发呆的小蔡°

最新推荐文章于 2024-07-29 11:24:35 发布

阅读量1k

点赞数

分类专栏： Vue3.2 文章标签： javascript 前端 vue3

本文链接：https://blog.csdn.net/shivy_/article/details/129425852

版权

本文介绍了如何在Vue3中封装一个返回顶部的组件，当页面滚动到一定距离时显示返回顶部按钮，点击后会触发平滑滚动动画。同时，提供了封装的JS代码和组件代码示例，以及在项目中的使用方法。

摘要由CSDN通过智能技术生成

介绍

vue3中，封装监听页面滚动的js，及页面滚动到一定像素时，显示返回顶部的按钮，点击按钮会有放大的动画，并逐渐滚动到顶部的组件。效果如下：
在这里插入图片描述

代码

封装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;