html之js控制动态滚动条滚动

有些时候我们不希望滚动条滚动到底的太快，有一个过渡，又不想用匀速运动，希望有一个可控制的曲线。

//缓慢滚动滚动条
var _scrolling=false;
//缓慢滚动滚动条
function _scrollto(elc,target){
    if(!_scrolling){
        var now =$(elc)[0].scrollTop;
        var total =target-now; 
        if(total>0){
            _scrolling=true;
            var rateval =scrollrate(total);
            console.log(rateval);
            var tickindex= -1;
            var tickinter=setInterval(function(){
                tickindex ++;
                if(rateval[tickindex]>0){
                now = now+rateval[tickindex];
                $(elc).scrollTop(now);
                }
                if(tickindex>=rateval.length){
                    clearInterval(tickinter);
                     _scrolling=false;
                }
            },60);
        }
    }
}

function scrollrate(tnum) {

    //曲线概率，自己改
    var ratelist = [10,20,30,40,50,60,70,40,20,10];

    //计算随机数
    var _getrandom =function(minNum, maxNum) {
    switch (arguments.length) {
        case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
        case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            break;
        default:
            return 0;
            break;
    }
}

    var back=[];
    var sumrate = 0;
    for (var k = 0; k < ratelist.length; k++) {
        sumrate += ratelist[k];
    }
    var result = new Map();

    var persize=1;
    if(tnum>100){
     persize = parseInt(tnum/100);
    }

    for (var k = 0; k < (tnum>100?100:tnum); k++) {
        //最大不超过100次           
        var hitval = _getrandom(0, sumrate);
        if (hitval > 0) {
            var hiti = ratelist.length - 1;
            var hitcount = 0;
            for (var i = 0; i < ratelist.length; i++) {
                if (ratelist[i] != 0) {
                    hitcount += ratelist[i];
                    if (hitcount >= hitval) {
                        hiti = i;
                        break;
                    }
                }
            }
            if (hiti < ratelist.length) {
                if (result.has(hiti)) {
                    var v = result.get(hiti);
                    result.set(hiti, (v + persize));
                } else {
                    result.set(hiti, persize);
                }
            }
        }
    }

    //可能还会有结余 处理结余
    if(tnum>100){
        var less = tnum-persize*100;
        if(less>0){
            persize=1;
            for (var k = 0; k < less; k++) {
                //最大不超过100次           
                var hitval = _getrandom(0, sumrate);
                if (hitval > 0) {
                    var hiti = ratelist.length - 1;
                    var hitcount = 0;
                    for (var i = 0; i < ratelist.length; i++) {
                        if (ratelist[i] != 0) {
                            hitcount += ratelist[i];
                            if (hitcount >= hitval) {
                                hiti = i;
                                break;
                            }
                        }
                    }
                    if (hiti < ratelist.length) {
                        if (result.has(hiti)) {
                            var v = result.get(hiti);
                            result.set(hiti, (v + persize));
                        } else {
                            result.set(hiti, persize);
                        }
                    }
                }
            }
        }
    }

    for (var k = 0; k < ratelist.length; k++) {
        if (result.has(k)) {
            back[k]=result.get(k);
        } else {
            back[k]=0;
        }
    }

    return back;
}

调用比如

_scrollto(".divscrollbox",1000);//表示.divscrollbox滚动到目标1000位置.