vue移动端实现滚动到顶部

<template>
  <div class="home">
    <div @scroll="scroll()">
      <div v-for="(item,index) in this.list" :key="index" class="every">{{item}}</div>
    </div>
    <div class="scrolltop" v-show="isShow" @click="goTop">返回顶部</div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data: function() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8],
      isShow: false //默认弹出框是隐藏状态
    };
  },
  mounted() {
    window.addEventListener("scroll", () => {
      let scrollHeight = document.documentElement.scrollHeight;
      console.log("页面的总体高度", scrollHeight);
      let clientHeight = document.documentElement.clientHeight;
      console.log("页面的 可视区域", clientHeight);
      //获取可是区域的距离
      let scrollTop = parseInt(document.documentElement.scrollTop);
      console.log(scrollTop, "距离页面最顶部的距离");
      // 当我们的滚动距离加上也是区域
      if (scrollTop > 400) {
        this.isShow = true;
      }
    });
  },
  methods: {
    goTop() {
      document.documentElement.scrollTop = 0;
      this.isShow = false;
    }
  }
};
</script>
<style scoped>
.home {
  width: 100%;
  height: 1800px;
  /* background-color: palegreen; */
  position: relative;
}
* {
  margin: 0;
  padding: 0;
}
.every {
  width: 100%;
  height: 150px;
  border: 1px solid red;
}
.scrolltop {
  width: 50px;
  height: 50px;
  border: 1px solid red;
  font-size: 12px;
  line-height: 50px;
  position: absolute;
  top: 800px;
  right: 10px;
}
</style>