vue3 滚动到顶部

Vue3 中，滚动到页面顶部通常通过 JavaScript 事件监听和滚动事件来实现。你可以创建一个自定义指令或者使用 Vue 的 `mounted` 生命周期钩子来处理这个功能。下面是一个简单的示例：

// 定义自定义指令
import { defineComponent } from 'vue';
export default {
  directives: {
    scrollToTop: {
      inserted: function (el, binding) {
        el.addEventListener('scroll', () => {
          if (window.pageYOffset >= document.documentElement.scrollHeight - window.innerHeight) {
            // 当滚动到底部时，滚动到顶部
            window.scrollTo(0, 0);
          }
        });
      },
      unbind: function (el) {
        el.removeEventListener('scroll', this.handler); // 移除事件监听
      },
    },
  },
};

// 使用自定义指令
<template>
  <div v-scroll-to-top>
    ...内容...
  </div>
</template>

<script setup></script>

在这个例子中，当元素绑定了 `v-scroll-to-top` 指令后，会在元素滚动时检查是否已经到达底部，如果到了就滚动回到顶部。