js从开始位置滚动到结束位置，固定时间下匀速滚动和变速滚动。

从开始位置滚动到结束位置，距离固定已知，时间固定已知，那么就只是一个简单的两个方程式，一个斜率固定（直线方程），一个斜率不固定（一元二次方程，抛物线）。斜率也就是速度

斜率固定，也就是速度固定

//从开始的位置移动到结束的位置（匀速）
function startRollToEnd(end=0,time = 100){
    let timer;
    //获取当前毫秒数
    let startTime = +new Date();
    let start = document.documentElement.scrollTop || document.body.scrollTop;  //初始位置  
    //获取从开始到结束需要滚动的长度
    let lengthY = start - end;
    timer = requestAnimationFrame(function func(){
        //获取下一帧的时间距离开始的时间，以此计算此时的位置，如果超过了预计的时间，则就等于参数所规定的时间
        let timeX = time - Math.max(0,startTime - (+new Date()) + time);
        document.documentElement.scrollTop = document.body.scrollTop = timeX * (-lengthY) / time + start;
        timer = requestAnimationFrame(func);
        //如果距离开始时间已经到了规定的时间则不用在执行了
        if(timeX == time){
            cancelAnimationFrame(timer);
        }
    });
}

斜率不固定（斜率从最大变为最小）

function startRollToEndTwo(end=0,time = 100){  //变速（匀减速）
    let timer;
    //获取当前毫秒数
    let startTime = +new Date();     
    let start = document.documentElement.scrollTop || document.body.scrollTop;  //初始位置
    //获取从开始到结束需要滚动的长度
    let length = start - end;
    //假设时间(x)与距离(y)成立xy坐标轴,要想变速那么时间与距离之间的关系：a*x^2 + b*x = y
    //已知两个坐标点,求解ab常量
    const [x1,y1,x2,y2] = [time,length,time*2,0];
    let a = (y1/x1 - y2/x2)/(x1 - x2);
    let b = (y1-a*Math.pow(x1,2))/x1;
    timer = requestAnimationFrame(function func(){
        //获取下一帧的时间距离开始的时间，以此计算此时的位置，如果超过了预计的时间，则就等于参数所规定的时间
        let timeX = time - Math.max(0,startTime - (+new Date()) + time);
        let lengthY = a*Math.pow(timeX,2) + b*timeX;
        document.documentElement.scrollTop = document.body.scrollTop = -lengthY + start;
        timer = requestAnimationFrame(func);
        //如果距离开始时间已经到了规定的时间则不用在执行了
        if(timeX == time){
            cancelAnimationFrame(timer);
        }
    });
}

使用方法

startRollToEnd(<滚动条要到达的位置>,<滚动时间>);

代码基本加了注释，很好理解哟。

原文地址