实现返回顶部时的滚动效果

以下为在 vue 中的实现

export default {
  methods: {
    scrollTo (element, to, duration) {
      if (duration <= 0) return
      var difference = to - element.scrollTop // 滚动条需要移动的总距离
      var perTick = difference / duration * 10 // 每次需要移动的距离

      setTimeout(() => {
        element.scrollTop = element.scrollTop + perTick
        if (element.scrollTop === to) return // 如果完成要求的移动 则停止调用
        this.scrollTo(element, to, duration - 10) // 递归调用 直到完成规定的移动
      }, 10)
    },
     // 点击返回顶部按钮时触发事件
    hToTop () {
      // 第三个参数设置为 window.pageYOffset / 10 是为了保持滚动速度一致
      this.scrollTo(document.documentElement, 0, window.pageYOffset / 10)
    }
  }
}