滚动到指定位置（requestAnimationFrame）

1.运动的效果

  1 //Tween运动算法
 2 Mover.prototype.Tween = {
 3     /*
 4         4个參数
 5         t：current  time（当前时间）
 6         b：beginning  value（初始值）
 7         c： change  in  value（变化量）
 8         d：duration（持续时间）
 9         return  （目标点）
10     */
11     linear(t, b, c, d){  //匀速
12         return c * t / d + b;
13     },
14     easeIn(t, b, c, d){  //加速曲线
15         return c * (t /= d) * t + b;
16     },
17     easeOut(t, b, c, d){  //减速曲线
18         return - c  * (t /= d) * (t - 2) + b;
19     },
20     easeBoth(t, b, c, d){  //加速减速曲线
21         if ((t/=d/2) < 1) {
22             return c / 2 * t * t + b;
23         }
24         return - c / 2 * ((-- t) * (t - 2) - 1) + b;
25     },
26     easeInStrong(t, b, c, d){  //加加速曲线
27         return c * (t /= d) * t * t * t + b;
28     },
29     easeOutStrong(t, b, c, d){  //减减速曲线
30         return -c * ((t = t / d - 1) * t * t * t - 1) + b;
31     },
32     easeBothStrong(t, b, c, d){  //加加速减减速曲线
33         if ((t /= d / 2) < 1) {
34             return c / 2 * t * t * t * t + b;
35         }
36         return -c / 2 * ((t- = 2) * t * t * t - 2) + b;
37     }
38 }
 

2.然后搭配requestAnimationFrame封装一个自定义滚动

  1 scrollToView(value, time) { // 自定义距离和时间
 2       const scroll = value;
 3       const scrollStart = 0;
 4       let start = null;
 5       const step = (timestamp) => {
 6         if (!start) {
 7             start = timestamp;
 8         }
 9         const stepScroll = this.sineaseOut(timestamp - start, 0, scroll, time || 500); //任意一个运动效果函数
10         document.body.scrollTop = scrollStart + stepScroll;
11         const total = document.body.scrollTop;
12         if (total < scrollStart + scroll) {
13           requestAnimationFrame(step);
14         }
15       };
16   }