Vue3实现组件与JS跳转顶端

介绍

在vue3框架中，开发用于监听页面滚动行为的js代码，并实现当页面滚动至特定像素位置时，自动展示返回顶部按钮的功能。用户点击该按钮后，将触发一个放大动画效果，并通过平滑滚动的方式将页面逐步移至顶部。组件实现的效果如下：

代码

1. 对JavaScript代码进行封装处理，用于监测页面滚动状态，并控制返回顶部按钮的显示与隐藏；在项目文件结构中新增一个名为utils的文件夹，随后在该文件夹内部生成index.js文件；此文件将用于存放适用于整个项目的通用功能函数，当前所需的返回顶部功能代码即编写于该位置。

    /** * @监听屏幕滚动式时，是否显示返回顶部的按钮
     * @return { boolean } 返回结果为布尔类型
     **/
    export const startScroll = () => {
      // 定义是否显示 返回顶部的按钮
      let scroll= document.documentElement.scrollTop  // //获取页面纵坐标的滚动条