vue3 使用window.scrollTop回到页面顶部

如果你想在当前页面切换tab时将页面滚动到顶部，你可以使用window.scrollTo方法来实现。以下是一个示例代码：

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const tab = ref(1); // 当前选中的tab，默认为1

    watchEffect(() => {
      // 监听tab的变化
      if (tab.value === 2) {
        // 如果切换到tab 2，将页面滚动到顶部
        window.scrollTo({
          top: 0,
          behavior: 'smooth' // 可选，使滚动平滑
        });
      }
    });

    return {
      tab
    };
  }
};

在上面的代码中，我们使用ref来创建一个响应式的变量tab，用于表示当前选中的tab。

然后，使用watchEffect来监听tab的变化。当tab的值变为2时，我们调用window.scrollTo方法将页面滚动到顶部。

在模板中，你可以将tab与切换tab的事件绑定，并通过修改tab的值来触发滚动效果。

<template>
  <div>
    <button @click="tab = 1">Tab 1</button>
    <button @click="tab = 2">Tab 2</button>
    <button @click="tab = 3">Tab 3</button>
  </div>
</template>

如果是想要离开当前页面，可以监听路由变化，触发滚动，以下是一个示例代码：

import { onBeforeRouteUpdate } from 'vue-router';

export default {
  setup() {
    const scrollToTop = () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth' // 可选，使滚动平滑
      });
    };

    // 在路由更新之前触发scrollToTop方法
    onBeforeRouteUpdate(scrollToTop);

    return {
      scrollToTop
    };
  }
};

在上面的代码中，我们使用onBeforeRouteUpdate钩子来监听路由更新之前的事件。在该钩子中，我们调用scrollToTop方法来将页面滚动到顶部。