点击按钮滚动到顶部，鼠标滚轮滚动则取消

<template>
  <div class="fruit_ent">
    <div class="fruit_ent_title">谢霆疯的水果店</div>
    <button @click="qtzwDetails">回到顶部</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const boxDom = ref(null);

const timer = ref();
let stepNum = ref(5);
onMounted(() => {
  window.addEventListener('mousewheel', handleScroll);
})

onBeforeUnmount(() => {
  window.removeEventListener('mousewheel', handleScroll)
  console.log('被卸载了');
})

const qtzwDetails = () => {

  timer.value = setInterval(() => {
    let domTop = document.documentElement.scrollTop
    console.log('domTop', domTop);
    let step = Math.floor(- domTop / stepNum.value)
    console.log('当前的一个步数', step);
    document.documentElement.scrollTop = domTop + step;
    if (domTop <= 0) {
      clearInterval(timer.value)
    }
  }, 17)
}

const handleScroll = () => {
  if (timer.value) {
    clearInterval(timer.value)
  }
}
</script>

<style scoped>
.fruit_ent_title {
  width: 300px;
  height: 5000px;
}
</style>