57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<template>
|
|
<div class="returnTop flexcenter" @click="screenroll()" v-if="show">
|
|
<img class="icon" src="@/assets/img/publicImage/back-icon.png">
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
let show = ref(false)
|
|
onMounted(() => {
|
|
window.addEventListener('scroll', handleScroll);
|
|
});
|
|
|
|
// onUnmounted(() => {
|
|
// window.removeEventListener('scroll', handleScroll);
|
|
// });
|
|
|
|
const handleScroll = () => {
|
|
if (Math.random() > 0.3) return
|
|
const scrolledDistance = window.scrollY || window.pageYOffset;
|
|
if (scrolledDistance >= 500 && !show.value) show.value = true
|
|
if (scrolledDistance < 500 && show.value) show.value = false
|
|
}
|
|
|
|
const screenroll = () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth"
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@media screen and (max-width: 1360px) {
|
|
.returnTop {
|
|
right: 20px !important;
|
|
}
|
|
}
|
|
|
|
.returnTop {
|
|
position: fixed;
|
|
right: calc((100vw - 1200px) / 2 - 75px);
|
|
bottom: 18px;
|
|
width: 60px;
|
|
height: 60px;
|
|
background-color: #323232;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
|
|
border-radius: 50%;
|
|
z-index: 10;
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
}
|
|
</style> |