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

介绍

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

代码

  1. 封装js,监听屏幕滚动事件,以及是否显示返回顶部的按钮;
    在项目目录下新建 utils文件夹,并在该文件夹下创建index.js文件;在这文件里写全局通用的一些方法;现在需要用到的返回顶部的方法就写这里面。
/**
 * @监听屏幕滚动式时,是否显示返回顶部的按钮
 * @return { boolean } 返回结果为布尔类型
 **/
export const startScroll = () => 

你可能感兴趣的:(Vue3.2,javascript,前端,vue3)