仅 JavaScript 按钮按下时平滑滚动

Question

该网站有一个全高图像启动。更多内容位于首屏下方，图像底部有一个“滚动”元素，以提示用户发现其余内容。单击后，我成功地使网站向下滚动 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);
        }       
   }; 
};

这适用于滚动，但不平滑。我认为如果我有 for 循环，将 window.scrollBy 值更改为 .001 之类的值会使其滚动得更慢(因此，平滑)，但该函数似乎不采用小数点。

有什么建议吗？从技术上讲，现在已经很好了，但我宁愿添加最后一点润色。谢谢!

Answer 1

您的代码运行速度非常快，但您看不到流畅的效果。您必须使用 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);
    };
};