vue一键回到顶部按钮

根据提供的引用内容，我们可以实现一个基于Vue的一键回到顶部按钮，具体实现过程如下：

1. 在Vue组件中添加一个按钮元素，用于触发回到顶部事件。

2. 在Vue组件的data中添加一个变量isShowBackTop，用于控制回到顶部按钮的显示和隐藏。

3. 在Vue组件的methods中添加一个backTop方法，用于实现回到顶部的操作。在该方法中，我们可以使用window.scrollTo方法将页面滚动到顶部，并添加一个定时器，实现滚动的动画效果。

4. 在Vue组件的mounted生命周期函数中，添加一个滚动事件监听器，用于判断是否需要显示回到顶部按钮。当页面滚动高度大于屏幕高度时，将isShowBackTop变量设置为true，否则设置为false。

下面是一个示例代码：

<template>
  <div>
    <!-- 回到顶部按钮 -->
    <div v-show="isShowBackTop" class="back-top" @click="backTop">
      <i class="iconfont icon-top"></i>
    </div>
    <!-- 页面内容 -->
    <div class="content">
      ...
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowBackTop: false // 控制回到顶部按钮的显示和隐藏
    }
  },
  methods: {
    backTop() {
      // 回到顶部操作
      let currentScroll = document.documentElement.scrollTop || document.body.scrollTop
      if (currentScroll > 0) {
        window.requestAnimationFrame(this.backTop)
        window.scrollTo(0, currentScroll - (currentScroll / 5))
      }
    }
  },
  mounted() {
    // 滚动事件监听器
    window.addEventListener('scroll', () => {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      this.isShowBackTop = scrollTop > window.innerHeight
    })
  }
}
</script>

<style>
.back-top {
  position: fixed;
  right: 50px;
  bottom: 50px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.icon-top {
  font-size: 24px;
}
</style>