由于最近要实现这个功能，没有发现比较完善比较满意的实现思路。所以，自己写了一版。请教了大神一种比较好的思路，写出来分享一下～
实现页面滚动到目标位置，可以向上或向下。
这个功能用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();
