【requestAnimationFrame】用原生js实现页面平滑滚动到目标位置-2018-05-11

由于最近要实现这个功能，没有发现比较完善比较满意的实现思路。所以，自己写了一版。请教了大神一种比较好的思路，写出来分享一下～

实现页面滚动到目标位置，可以向上或向下。

这个功能用jQuery实现比较容易，三五行搞定，但是，有时候，总不能为了实现一个滚动效果去多引入一个库，所以，现在我们抛开jQuery库，用原生JS实现。

实现动画的API：requestAnimationFrame
页面滚动的API：window.scrollTo()

思路步骤：

获取元素。
获取元素到屏幕顶部的距离 top: getBoundingClientRect。
获取页面已滚动的距离 pageY: pageYOffset。
得到目标位置 endPosition: top+pageY。
requestAnimationFrame 是在显示器屏幕刷新一帧时候执行一次传入的run函数。
设定动画持续时间 duration=500ms，
定义run函数，显示器每刷新一帧，则循环调用一次run函数。

每次调用run的时候，获取时间差，根据时间-位置对应的值，根据时间得到此刻应该滚动到的位置，window.scrollTo 到这个位置。
根据时间设定要滚动到的位置。如果到了规定时间，页面应该在目标位置。否则直接滚动到目标位置。

scroll = (ev, target) => {
    ev.preventDefault();

    const scrollPart = document.querySelector('.' + target); // 目标节点class
    const top = scrollPart.getBoundingClientRect().top;
    const pageY = window.pageYOffset;
    const endPosition = top + pageY;

    const startTime = +new Date();
    const duration = 500; //ms

    function run() {
        const time = +new Date() - startTime;

        window.scrollTo(0, pageY + top * (time / duration));
        run.timer = requestAnimationFrame(run);

        if (time >= duration) {
            window.scrollTo(0, endPosition);
            cancelAnimationFrame(run.timer);
        }
    } 

    requestAnimationFrame(run);
}

scroll();