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

介绍

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;
    if(backTop===0){
      // 当没有卷去的高度时清空定时器
      clearInterval(timer)
    }
  },30);  //使用定时器来调用函数使其更顺滑
}

2. 新建返回顶部的组件，组件绑定滚动的事件，代码如下：

<template>
  <div class="scroll-top" @click="scrollTop" v-show="showBack">
    <img src="@/assets/images/news/icon_a_back.jpg" alt="" class="back-img">
    <img src="@/assets/images/news/icon_a_back_on.jpg" alt="" class="hover-back-img">
    <!-- <p>返回顶部</p> -->
  </div>
</template>
<script setup>
  const props = defineProps({
    showBack: {
      type: Boolean,
      default: false,
    }
  })
  const emit = defineEmits([
    'scrollTop',
  ])
  const scrollTop = () => {
    emit('scrollTop');
  }
</script>
<style lang="less" scoped>
    .scroll-top {
   	  // 动画效果
      transition: transform 0.6s ease;
      cursor: pointer;
      position: fixed;
      right: 30px;
      bottom: 45px;
      height: 35px;
      line-height: 35px;
      width: 35px;
      border: 1px solid #959595;
      border-radius: 50%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      img {
        display: inline-block;
        height: 15px;
        width: 15px;
      }
      .hover-back-img {
        display: none;
      }
      p {
        font-size: 14px;
        color: #000;
        margin-left: 10px;
      }
    }
    .scroll-top:hover {
      // 放大效果
      transform: scale(1.4);
      border: 1px solid #d5051c;
      p {
        color:#d5051c;
      }
      .back-img {
        display: none;
      }
      .hover-back-img {
        display: block;
      }
    }
</style>

3. 在页面中使用，主要引入封装的js文件及返回顶部的组件；代码如下：

<template>
  <div class="index">
    <back-top :showBack="state.showBack" @scrollTop="scrollTop"></back-top>
  </div>
</template>
<script setup>
// 引入返回顶部的组件
import backTop from './/componentsPage/BackTop.vue'
// 引入封装的方法
import {startScroll, backToTop} from './utils/index';
import {reactive, onMounted,} from 'vue';
const state = reactive({
  showBack: false,
})
// 滑动到顶部
const scrollTop = () => {
  backToTop();
}
// 开始滚动
const isScroll = () => {
  state.showBack = startScroll();
}
onMounted(()  => {
  // 监听页面滚动事件
  window.addEventListener('scroll',isScroll)
})
</script>