Question

我想使用我在github上看到过的代码，但我不知道如何在HTML上应用此代码，以获得滚动效果。

关键是，我不知道如何运行使用此代码

来源https://gist.github.com/andjosh/6764939

document.getElementsByTagName('button')[0].onclick = function () {
    scrollTo(document.body, 0, 1250); 
}

function scrollTo(element, to, duration) {
    var start = element.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20;

    var animateScroll = function(){        
        currentTime += increment;
        var val = Math.easeInOutQuad(currentTime, start, change, duration);
        element.scrollTop = val;
        if(currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    };
    animateScroll();
}

//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
};

Answer 1

首先，您必须将document.body替换为document.documentElement，~~，因为document.body.scrollTop()已被弃用。~~

编辑：似乎我对于不推荐使用的document.body.scrollTop（）并不完全正确。支持多种浏览器的最佳解决方案是检查这两种情况。

其次，您需要设置一个值＆gt; 0表示'to'参数，正如Quantastical已经指出的那样。

还要确保您拥有<button>元素。它应该工作。

滚动的Javascript动画，香草JS

1 个答案: