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>