<template>
  <div>
    <p @click="backtop" v-show="isShow">回到頂部</p>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      isShow: false
    }
  },
  mounted() {
    window.addEventListener("scroll", this.showbtn, true);
  },
  methods: {
    
 
// 顯示回到頂部按鈕
    showbtn() {
      let that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if(that.scrollTop >= 400) {
        this.isShow = true
      }else {
        this
 
.isShow = false
      }
    },
    /**
     * 回到頂部功能實現過程：
     * 1. 獲取頁面當前距離頂部的滾動距離（雖然IE不常用了，但還是需要考慮一下相容性的）
     * 2. 計算出每次向上移動的距離，用負的滾動距離除以5，因為滾動的距離是一個正數，想向上移動就是做一個減法
     * 3. 用當前距離加上計算出的距離，然後賦值給當前距離，就可以達到向上移動的效果
     * 4. 最後記得在移動到頂部時，清除定時器
     */
    backtop() {
      var timer = setInterval(function
 
() {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 30);
    }
  }
};
</script>

<style scoped>
p {
  position: fixed;
  top: 500px;
  right: 0;
  width: 20px;
  padding: 5px;
  color: red;
  background-color: #eee;
}
</style>