vue3-返回顶部组件

最新推荐文章于 2024-06-28 01:04:55 发布

清砾

最新推荐文章于 2024-06-28 01:04:55 发布

阅读量880

点赞数 2

文章标签： css3

本文链接：https://blog.csdn.net/m0_46690660/article/details/124466760

版权

这篇博客详细介绍了如何在Vue项目中实现页面回顶功能。通过监听窗口滚动事件，当页面滚动到一定距离时显示返回顶部按钮。点击该按钮，利用定时器平滑滚动回顶部。代码中使用了`el-image`组件和自定义样式，同时包含鼠标悬停时的动画效果。

摘要由CSDN通过智能技术生成

<template>
  <div v-if="btnShow" class="to-top">
    <el-image class="to-top-img scaleBig" :src="BackTop" fit="cover" @click="backTop"></el-image>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import BackTop from "../../assets/images/to-top.svg";
const btnShow=ref(false)
onMounted(() => {
  window.addEventListener('scroll',scrollToTop)
})
let timer=null;
function backTop(){
  timer=setInterval(function (){
    let backTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    let speedTop=backTop/10;
    document.documentElement.scrollTop=backTop-speedTop;
    if(backTop===0){
      clearInterval(timer)
    }
  },10);
}
function scrollToTop(){
  let pageLookHeight =document.documentElement.clientHeight || document.body.clientHeight
  let scroll= document.documentElement.scrollTop
  btnShow.value = scroll >= pageLookHeight * 0.618;
}
</script>

<style lang="scss" scoped>
.to-top{
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 2;
  border: 1px solid #333333;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all ease-in-out .5s;
  overflow: hidden;
  &-img{
    width: 40px;
    height: 40px;
  }
}

/*鼠标经过放大*/
.scaleBig{
  transition: transform 0.5s ease;
}
.scaleBig:hover{
  animation: hover_scale 1.5s ease-in-out infinite ;
}
@keyframes hover_scale {
  0% {transform: scale(1);}
  50% {transform: scale(1.2);}
  100% {transform: scale(1);}
}
</style>