
<template>
  <div id="goTop">

    <div class="show-go-top" v-show="goTopShow" @click="goTop">
      <img style="width: 20px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjhGNUZDOUNDQTA4MTFFOTk5MENGOTY5QzExODBBNEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjhGNUZDOUJDQTA4MTFFOTk5MENGOTY5QzExODBBNEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY2NzE3NzI0LTA0YmUtYmU0Mi05MWNiLTdhMmEzYjNhZjkyMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5ok33PAAAA1UlEQVR42mL8//8/A7UBEwMNwKihA2OoLxC/AmIHok0FJSk8WBeIf/2HgD9AHEhAPRjjk5QE4sdQA/8hGVxIrqFcQHwCyaBcIH74HwEmAzEzKYaCFG9EMqAUyeVnkMQ3ATE3sYZOQ9I4DU2OB4g3I8mDLJEgZGghkoaNOLwIEpuCpA4ULNq4DPWDht9/aHhyEYiQIiD+C1X/AYid0Q01B+KvUAWgGJchJukAcRAQf4Pq24Ju6F4kG3WJNBDZQXuAmB/dUF5oBDiRaCBWzDhaSFMdAAQYAIXvsMke49Y7AAAAAElFTkSuQmCC"/>
      <div class="goTop">回到顶部</div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "goTop",
    data() {
      return {
        scrollTop: "",
        goTopShow: false
      };
    },
    watch: {
      scrollTop(val) {
        if (this.scrollTop > 500) {
          this.goTopShow = true;
        } else {
          this.goTopShow = false;
        }
      }
    },
    methods: {
      handleScroll() {
        this.scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        if (this.scrollTop > 500) {
          this.goTopShow = true;
        }
      },
      goTop() {
        let timer = null,
          _that = this;
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn() {
          if (_that.scrollTop > 0) {
            _that.scrollTop -= 50;
            document.body.scrollTop = document.documentElement.scrollTop =
              _that.scrollTop;
            timer = requestAnimationFrame(fn);
          } else {
            cancelAnimationFrame(timer);
            _that.goTopShow = false;
          }
        });
      }
    },
    created(){
      if (typeof window !== 'undefined') {
        window.addEventListener('scroll', this.handleScroll);
      }
    },
    destroyed() {
      window.removeEventListener("scroll", this.handleScroll);
    }
  };
</script>

<style scoped>
  .show-go-top{
    position: fixed;
    right: 40px;
    bottom: 80px;
    width: 40px;
    height: 40px;
    text-align: center;
    background: #333;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
  }
  .show-go-top:hover .goTop{
    display: block !important;
  }
  .goTop {
    display: none;
    position: fixed;
    right: 40px;
    bottom: 80px;
    width: 40px;
    height: 40px;
    font-size: 12px;
    padding: 3px;
    text-align: center;
    background: #1bbb9f;
    color: #fff;
    cursor: pointer;
    z-index: 9;
  }
  .goTop:hover .goTopIcon {
    color: rgba(51, 153, 255, 1);
  }
  .goTopIcon {
    font-size: 20px;
    color: rgba(51, 153, 255, 0.8);
  }
</style>
