vue项目实现回到顶部 浮动按钮

要在Vue项目中实现回到顶部的浮动按钮，可以使用以下方法：

1. 创建一个全局组件，并将其注册到Vue实例中。该组件可以包含一个回到顶部的按钮，以及JavaScript代码来实现回到顶部的功能。例如：

<template>
  <div class="back-to-top" v-show="showBackToTop" @click="backToTop">
    <i class="fa fa-arrow-up"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBackToTop: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      if (window.pageYOffset > 300) {
        this.showBackToTop = true;
      } else {
        this.showBackToTop = false;
      }
    },
    backToTop() {
      window.scrollTo(0, 0);
    }
  }
}
</script>

<style>
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}

.back-to-top:hover {
  background-color: #555;
}

.show {
  display: block;
}
</style>

2. 使用该组件，并将其添加到所有需要回到顶部的页面中。例如：

<template>
  <div>
    <!-- 页面内容 -->
    <back-to-top />
  </div>
</template>

<script>
import BackToTop from '@/components/BackToTop';

export default {
  components: {
    BackToTop
  },
  // ...
}
</script>

在这个例子中，我们创建了一个全局组件BackToTop，并将其注册到Vue实例中。该组件包含了回到顶部的按钮，并使用JavaScript代码实现了回到顶部的功能。我们还将该组件添加到了所有需要回到顶部的页面中，以便用户可以在任何页面上使用该功能。