vue 回到顶部

要在 Vue 中实现回到顶部，你可以使用以下两种方法之一：

1. 利用 Vue 自带的指令 v-scroll-to，在点击按钮时滚动到顶部。

在模板中添加一个按钮，并绑定一个点击事件：

<template>
  <div>
    <!-- 模板内容 -->
    <button @click="scrollToTop">回到顶部</button>
  </div>
</template>

在 Vue 组件的 methods 中定义 scrollToTop 方法，使用 v-scroll-to 指令将页面滚动到顶部：

<script>
import { scrollTo } from 'vue-scroll-to'

export default {
  methods: {
    scrollToTop() {
      scrollTo(0, 500)
    }
  }
}
</script>

2. 利用原生 JavaScript，在点击按钮时滚动到顶部。

在模板中添加一个按钮，并绑定一个点击事件：

<template>
  <div>
    <!-- 模板内容 -->
    <button @click="scrollToTop">回到顶部</button>
  </div>
</template>

在 Vue 组件的 methods 中定义 scrollToTop 方法，使用原生 JavaScript 将页面滚动到顶部：

<script>
export default {
  methods: {
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

以上两种方法都可以实现回到顶部的功能，具体使用哪一种取决于你的项目需求和个人喜好。