在vue中用js实现带过渡的返回顶部的效果

• 在项目中都会有一些很长篇的文档，翻到底部再手动往上翻很麻烦，这篇文章简单记录一下原生返回顶部的方法，目前组件库中都有自带返回顶部的组件，比原生方法要方便许多。

• html中可以放图标、图片等等。

<div class="top" @click="toTop" v-if="showArrow">∧</div>

• 在data中将showArrow设为false是为了控制在达到一定高度的时候才会显示，这步不写html元素是不会出来的。

data() {
  return {
    showArrow: false
  };
 },

• 这两个生命周期的钩子函数就不细说了，addEventListener()用于添加一个事件处理程序，而removeEventListener()用于移除事件处理程序。它们都接受3个参数：如addEventListener("事件名" , "事件处理函数" , "布尔值");第三个参数可以省略，默认为false。通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；

mounted () {
  window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
  window.removeEventListener('scroll', this.scrollToTop)
},

• js方法

methods: {
  // 点击箭头回到顶部方法，加计时器是为了过渡顺滑
  toTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
  },
  // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
  scrollToTop () {
    const that = this
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    that.scrollTop = scrollTop
    if (that.scrollTop > 60) {
      that.showArrow = true
    } else {
      that.showArrow = false
    }
  }
},

• css样式

<style scoped>
    .top {
      position: fixed;
      display: inline-block;
      width: 50px;
      bottom: 1rem;
      right: 1rem;
      font-size: 30px;
      border-radius: 50%;
      border: 1px solid #ccc;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #fff;
    }
</style>