按下按钮时仅Javascript平滑滚动

此网站有一个完整的高度图像开始。更多内容位于折叠下方，图像底部有一个“滚动”元素，提示用户发现其余内容。点击后，我成功地使网站向下滚动了300像素。不过，我希望能顺利完成这项工作。这是我目前的代码：

  window.onload = function () { 
    var scroll = document.getElementById("scroll");
    scroll.onclick = function () {
        var top = self.pageYOffset; 
        var goal = 300; 
        for(var i=0, l=goal; i<l; ++i) {
        window.scrollBy(0,1);
        }       
   }; 
};

window.onload=function（）{
var scroll=document.getElementById（“滚动”）；
scroll.onclick=函数（）{
var top=自我页面偏移量；
var目标=300；
对于（var i=0，l=goal；i试试这样的方法

您的代码运行速度非常快，并且看不到平滑效果。您必须使用
setInterval（）
函数，并在每次迭代中滚动到300/n像素（n-迭代次数）。如下所示：

window.onload = function () { 
    var scroll = document.getElementById("scroll");
    scroll.onclick = function () {
        var currentScroll = 0; 
        var goal = 300;
        var step = goal/10
        var timer = setInterval( function () {
            if (currentScroll < goal) {
                window.scrollBy(0, step);
                currentScroll += step;
            } else {
                clearInterval(timer);
            }
        }, 50);
    };
};       

window.onload=function（）{
var scroll=document.getElementById（“滚动”）；
scroll.onclick=函数（）{
var currentScroll=0；
var目标=300；
var步骤=目标/10
变量计时器=设置间隔（函数（）{
如果（当前滚动<目标）{
滚动窗口（0，步）；
currentScroll+=步进；
}否则{
清除间隔（计时器）；
}
}, 50);
};
};       
谢谢，但是如果可以的话，我想避免使用jQuery，只是为了优化性能，因为它是我在网站上唯一使用它的东西。这很容易翻译吗？我怎样才能使我上面的示例平滑地滚动？@mobilefire它可以滚动，只是不平滑。我真的需要像jQuery这样的库来完成吗？我知道Javascript有本机动画功能，但我不知道如何将它们应用于Windows。Scrollby不是我想要的。我只是想要一个平滑的滚动顶部，您发布的链接看起来更像视差效果。对于这样简单的动画，加载整个库似乎是多余的。
window.onload = function () { 
    var scroll = document.getElementById("scroll");
    scroll.onclick = function () {
        var currentScroll = 0; 
        var goal = 300;
        var step = goal/10
        var timer = setInterval( function () {
            if (currentScroll < goal) {
                window.scrollBy(0, step);
                currentScroll += step;
            } else {
                clearInterval(timer);
            }
        }, 50);
    };
};