<template>
<div class="body"></div>
<div v-if="btnShow" style="position: fixed; right: 50px;bottom: 50px; z-index: 2">
<button class="scaleBig" @click="backTop">1213</button>
</div>
</template>
<script>
import { onMounted, ref } from "vue";
export default {
name: "Top",
setup() {
const btnShow = ref(false)
let timer = null; onMounted(() => {
window.addEventListener('scroll', scrollToTop)
})
const 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)
}
}, 50);
}
const 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 lang="scss">
.body{
height: 5000px;
width: 100%;
background-color: aquamarine;
}
.scaleBig {
transition: transform 0.5s ease;
}
.scaleBig:hover {
transform: scale(1.4);
}
</style>
vue3 返回顶部组件
最新推荐文章于 2025-05-21 21:38:55 发布