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