javascript - 动画 javascript scrollBy

Question

我有一个下一步按钮，点击它时我希望它向下滚动页面 517 像素。

使用下面的代码(我在另一个网站上找到的)我制作了一个按钮来执行此操作，但我希望它以平滑的动画方式滚动。我需要添加什么才能做到这一点？

我使用的代码如下:

function scrollByPixels(x, y)
{
  window.scrollBy(x, y);
}

以及实际按钮上的以下内容:

onclick="javascript:scrollByPixels(0, 517)"

提前致谢

Answer 1

function scrollByPixels(x, y) {
  $('html,body').stop().animate({
    scrollLeft: '+=' + x,
    scrollTop: '+=' + y
  });
}

...或者作为一个简单的插件:

$.fn.scrollBy = function(x, y){
    return this.animate({
        scrollLeft: '+=' + x,
        scrollTop: '+=' + y
    });
};

demo