vue 实现返回顶部--带动画效果

效果：

HTML部分：

<div class="up" @click="handleUp"></div>

CSS部分：

/* 编译器使用的是 stylus */
.up
  position: fixed
  bottom: 60px
  right: 30px
  width: 50px
  height: 50px
  border-radius: 7px
  /* 这里引用了 iconfoot 的返回顶部图片 */
  background: url('@/assets/images/返回顶部 .svg') no-repeat center center
  background-color: #fff
  cursor: pointer

JS部分：

handleUp() {
       const timer = setInterval(() => {
        // 文档滚动的距离
        const top = document.documentElement.scrollTop
        // 设置步长，便于实现动画滚动
        const speed = Math.ceil(top / 10)
        if (document.documentElement.scrollTop > 0) {
          document.documentElement.scrollTop -= speed
        } else {
          // 当返回顶部时，清除定时器
          clearInterval(upRoll)
        }
      }, 20)
    }