vue如何实现点击分页后页面回顶部

<template>
  <div>
    <!-- 分页组件 -->
    <ul>
      <li v-for="page in totalPages" :key="page" @click="goToPage(page)">{{ page }}</li>
    </ul>

    <!-- 内容列表 -->
    <ul ref="contentList">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      totalPages: 0
    };
  },
  mounted() {
    // 初始化数据
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟异步获取数据
      setTimeout(() => {
        // 获取数据后更新items和totalPages
        // ...

        // 假设这里获取到了总页数
        this.totalPages = 5;
      }, 1000);
    },
    goToPage(page) {
      // 更新当前页码
      this.currentPage = page;

      // 滚动到顶部
      this.scrollToTop();
    },
    scrollToTop() {
      // 使用原生JavaScript方法将滚动条滚动到顶部
      window.scrollTo(0, 0);
    }
  }
};
</script>