使用vue实现回到顶部功能

可以通过以下步骤实现回到顶部功能：

1. 在vue组件中定义一个data属性`isTop`，用于记录当前是否在顶部，初始值为true。

data() {
  return {
    isTop: true
  }
}

2. 在组件的`mounted`钩子函数中，添加一个监听滚动事件的函数，判断当前位置是否在顶部，并根据需要更新`isTop`的值。

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    this.isTop = window.pageYOffset === 0
  }
}

3. 在组件中添加一个按钮，用于触发回到顶部的功能，并根据`isTop`的值动态显示或隐藏该按钮。

<button v-if="!isTop" @click="scrollToTop">回到顶部</button>

4. 实现`scrollToTop`函数，使用`window.scrollTo`方法将页面滚动到顶部。

methods: {
  scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  }
}

完整代码示例：

<template>
  <div>
    <!-- 页面内容 -->
    <button v-if="!isTop" @click="scrollToTop">回到顶部</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isTop: true
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.isTop = window.pageYOffset === 0
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>