<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>