vue3返回顶部组件(丝滑)

vue3返回顶部组件(丝滑)

我这里使用了阿里的字体图标，需要自己配置一下

<template>
  <div v-if="btnShow" style="position: fixed; right: 50px;bottom: 50px; z-index: 2">
      <el-button class="scaleBig" plain circle  @click="backTop">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-huidaodingbu"></use>
        </svg>
      </el-button>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import '../assets/font/iconfont'
export default {
  name: "Top",
  setup(){
    const btnShow=ref(false)
    let timer=null;
    onMounted(() => {
      window.addEventListener('scroll',scrollToTop)
    })
    function backTop(){
      timer=setInterval(function (){
        let backTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        let speedTop=backTop/5;
        document.documentElement.scrollTop=backTop-speedTop;
        if(backTop===0){
          clearInterval(timer)
        }
      },30);
    }
    function scrollToTop(){
      let pageLookHeight =document.documentElement.clientHeight || document.body.clientHeight
      let scroll= document.documentElement.scrollTop

      if (scroll >= pageLookHeight) {
        btnShow.value=true
      } else {
        btnShow.value=false
      }
    }
    return{
      top,
      btnShow,
      timer,
      backTop,
      scrollToTop
    }
  }
}
</script>

<style scoped>
/*鼠标经过放大*/
.scaleBig{
  transition: transform 0.5s ease;
}
.scaleBig:hover{
  transform: scale(1.4);
}
</style>