68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<template>
|
|
<!-- <div> -->
|
|
<div class="goTop" v-show="goTopShow" @click="goTop">
|
|
<img src="../assets/top.png" alt="">
|
|
</div>
|
|
<!-- </div> -->
|
|
</template>
|
|
<script setup>
|
|
import { ref, watch,onMounted,onUnmounted } from "vue"
|
|
const scrollTop = ref(0);
|
|
const goTopShow = ref(false);
|
|
watch(scrollTop, () => {
|
|
if (scrollTop.value > 250) {
|
|
goTopShow.value = true;
|
|
} else {
|
|
goTopShow.value = false;
|
|
}
|
|
})
|
|
const handleScroll = () => {
|
|
|
|
scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
|
if (scrollTop.value > 250) {
|
|
goTopShow.value = true;
|
|
}else{
|
|
goTopShow.value = false;
|
|
}
|
|
};
|
|
|
|
const goTop = () => {
|
|
let timer = setInterval(() => {
|
|
let ispeed = Math.floor(-scrollTop.value / 5)
|
|
document.body.scrollTop = scrollTop.value + ispeed
|
|
document.documentElement.scrollTop = scrollTop.value + ispeed
|
|
if (scrollTop.value === 0) {
|
|
clearInterval(timer)
|
|
}
|
|
}, 20)
|
|
|
|
|
|
|
|
};
|
|
onMounted(() => {
|
|
window.addEventListener("scroll", handleScroll);
|
|
});
|
|
onUnmounted(() => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.goTop {
|
|
position: fixed;
|
|
width: 69px;
|
|
height: 30px;
|
|
right:0px;
|
|
bottom:135px;
|
|
cursor: pointer;
|
|
z-index:999;
|
|
overflow: hidden;
|
|
border-radius: 15px 0 0 15px;
|
|
box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.goTop img {
|
|
width: 100%;
|
|
}
|
|
</style> |