Vue3返回顶部组件及返回顶部js封装

Posted 2023-03-11 发呆的薇薇°

介绍

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

代码

1. 封装js，监听屏幕滚动事件，以及是否显示返回顶部的按钮；
   在项目目录下新建 utils文件夹，并在该文件夹下创建index.js文件；在这文件里写全局通用的一些方法；现在需要用到的返回顶部的方法就写这里面。

/**
 * @监听屏幕滚动式时，是否显示返回顶部的按钮
 * @return  boolean  返回结果为布尔类型
 **/
export const startScroll = () =>