用vue制作一个返回顶部div，在顶部时该div隐藏

<template>
  <div class="back-to-top" v-show="showBackToTop" @click="backToTop">
    返回顶部
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBackToTop: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      if (window.scrollY > window.innerHeight / 2) {
        this.showBackToTop = true;
      } else {
        this.showBackToTop = false;
      }
    },
    backToTop() {
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
  },
};
</script>

<style>
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: lightgray;
  padding: 10px 20px;
  cursor: pointer;
}
</style>