滚动上的 Javascript 动画，Vanilla JS答案

【问题标题】：Javascript Animation on scroll, Vanilla JS滚动上的 Javascript 动画，Vanilla JS
【发布时间】：2018-05-17 15:42:28
【问题描述】：

我想使用我在 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;
};

【问题讨论】：

您的 HTML 中有 <button> 元素吗？点击它会发生什么？
我试过了兄弟，但没有任何反应。
谁能提供一个例子？关于这是如何工作的。这将是一个很大的帮助
投票结束，因为您没有包含重现您遇到的问题所需的最少代码。

标签： javascript html animation

【解决方案1】：

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

编辑：看来我对 document.body.scrollTop() 被弃用并不完全正确。支持多个浏览器的最佳解决方案是检查这两种情况。

其次，正如 Quantastical 已经指出的那样，您需要为 'to' 参数设置一个 > 0 的值。

还要确保您有一个 <button> 元素。那么它应该可以工作了。

【讨论】：

您仍在使用 document.getElementsByTagName("body") 查询正文，将其替换为 document.documentElement 即可。
感谢 broooo，对像我这样的新手很有帮助 :)
不客气 :) 很高兴知道：document.documentElement 将返回而不是。
为什么它不适用于 document.body？我不知道有什么区别，我想学习:)
这是一个浏览器特定的问题。一些浏览器将滚动条附加到全局窗口对象，即 document.documentElement（= 标签）。其他浏览器将其附加到 document.body（= 标签）。这会引起很多混乱，请在 Stackoverflow 上搜索。