回到顶部效果

这主要展示回到顶部的效果
html

<div v-show="showTop" class="toTop" @click="scrollToTop">
      <span class="fa fa-angle-double-up"></span>
    </div>

--------------------------------------------------------------------------------------------------------
在methods中写：
scrollToTop () {
      this.timer = setInterval(() => {
        let osTop = document.documentElement.scrollTop || document.body.scrollTop
        let ispeed = Math.floor(-osTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
        if (osTop === 0) {
          clearInterval(this.timer)
        }
      }, 30)
    },
    在mounted监听
     window.addEventListener('scroll', () => {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 100) {
        this.isNavFix = true
      } else {
        this.isNavFix = false
      }
      if (scrollTop < 100) {
        this.isNavStatic = true
      } else {
        this.isNavStatic = false
      }
      if (scrollTop > 115) {
        this.fixTop = true
      } else {
        this.fixTop = false
      }

      if (scrollTop > 300) {
        this.showTop = true
      } else {
        this.showTop = false
      }
    })
    ---------------------------------------------------------------------------------------------------------
    css代码
      .toTop {
    position: fixed;
    bottom: 85px;
    right: 15px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
    background-color: #fcb102;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    z-index: 9999 !important;
  }

  .toTop:hover {
    height: 50px;
  }

效果图：