使用scrollTop实现页面缓动的几种方式

背景介绍

最近再弄一个官网，需要实现一个小效果，就是 页面滚动到一定距离，显示一个按钮，点击此按钮，页面滚动到顶部

动手实现

1. 首先，肯定要监听页面的滚动，可以选择监听当前页面元素，也可以选择监听window，因为项目的原因，我选择监听window，通过获取根元素的scrollTop，对比预设的值，以此判断是否显示按钮。因为scroll事件是持续触发的事件，所以这里做了 节流 处理。顺便说下，按钮的显示或隐藏也可以通过css动画，或者vue的transition组价控制，效果会更好

   const fn = throttling(() => {
     const st = document.documentElement.scrollTop
     if (st > this.wh) {
       this.topShow = true
     } else {
       this.topShow = false
     }
   }, 100)
   window.addEventListener('scroll', fn)
   // 在组件销毁时，取消对scroll事件的监听
   this.$once('hook:beforeDestroy', function() {
     window.removeEventListener('scroll', fn)
   })
   复制代码

2. 上一步实现了按钮的显隐，接下来就实现点击按钮，页面滚动到顶部。scrollTop属性不但支持读，还支持写，所以实现的方法就是对元素(下面以ele代指)的scrollTop赋值

   // 方法1，直接对根元素赋值，当然，页面会瞬间到顶部，没有动画效果
   ele.scrollTop = 0
   
   // 方法2，通过setInterval实现，通过控制执行时间间隔和每次移动距离来保证动画过程，动画过程可能不够流畅
   const s = setInterval(() => {
       const top = ele.scrollTop - 50
       ele.scrollTop = top
       if (top < 10) {
         clearInterval(s)
       }
     }, 20)
     
   // 方法3，使用requestAnimationFrame，不会存在定时器的问题
   const go = () => {
       const top = document.documentElement.scrollTop - 40
       document.documentElement.scrollTop = top
       if (top < 10) {
         return false
       }
       requestAnimationFrame(go)
     }
     go()
   复制代码

总结

为了避免以后忘记，故记录下。