Javascript 可以用jQuery设置scrollTop的动画吗？

我想平稳地向下滚动。我不想为此编写函数，特别是如果jQuery已经有函数的话。

您只需使用

scrollTop

属性，如下所示：

$("html, body").animate({ scrollTop: "300px" });

.animate( 
    {scrollTop:'300px'},
    300,
    swing,
    function(){ 
       alert(animation complete! - your custom code here!); 
       } 
    )

---

试试这个插件。

尼克的答案很好，默认设置也不错，但是你可以通过完成所有可选设置来更全面地控制滚动

以下是它在API中的外观：

.animate( properties [, duration] [, easing] [, complete] )

所以你可以这样做：

$("html, body").animate({ scrollTop: "300px" });

.animate( 
    {scrollTop:'300px'},
    300,
    swing,
    function(){ 
       alert(animation complete! - your custom code here!); 
       } 
    )

---

下面是jQuery.animate函数api页面：

尼克的答案非常有用。在animate（）调用中指定complete（）函数时要小心，因为声明了两个选择器（html和body），因此它将执行两次

下面是如何避免双重回调的方法

var completeCalled = false;
$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            if(!completeCalled){
                completeCalled = true;
                alert('this alert will popup once');
            }
        }
    }
);

---

跨浏览器代码为：

$(window).scrollTop(300); 

---

它没有动画，但在任何地方都可以使用

但是如果你真的想在滚动时添加一些动画，你可以尝试我的简单插件（），它目前支持30多种放松样式

你可以使用jQuery动画进行特定持续时间的滚动页面：

$("html, body").animate({scrollTop: "1024px"}, 5000);

---

其中1024px是滚动偏移量，5000是以毫秒为单位的动画持续时间。

我有一个我认为比

$（'html，body'）更好的解决方案。

hack

它不是一行，但我对

$（'html，body'）

的问题是，如果在动画期间记录

$（window.scrollTop（）

，您会看到值在整个位置上跳跃，有时会跳跃数百像素（尽管我在视觉上看不到类似的情况）。我需要可预测的值，这样，如果用户在自动滚动期间抓住滚动条或旋转鼠标滚轮，我就可以取消动画

下面是一个函数，该函数将平滑地设置滚动动画：

function animateScrollTop(target, duration) {
    duration = duration || 16;
    var scrollTopProxy = { value: $(window).scrollTop() };
    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target }, 
            { duration: duration, step: function (stepValue) {
                var rounded = Math.round(stepValue);
                $(window).scrollTop(rounded);
            }
        });
    }
}

下面是一个更复杂的版本，它将在用户交互时取消动画，并重新刷新直到达到目标值，这在尝试立即设置scrollTop时非常有用（例如，只需调用

$（窗口）。scrollTop（1000）

-根据我的经验，这在大约50%的时间内无法工作。）

---

正如Kita所提到的，当您在“html”和“body”上设置动画时，会触发多个回调。我宁愿使用一些基本的特征检测，只对单个对象的scrollTop属性设置动画，而不是同时设置动画和阻止后续回调

另一个线程上接受的答案提供了一些关于我们应该尝试为哪个对象的scrollTop属性设置动画的见解：

更新---

上述特征检测尝试失败。似乎没有单行的方法，因为当存在doctype时，webkit类型的浏览器pageYOffset属性总是返回零。 取而代之的是，我找到了一种方法，使用一个承诺，在每次动画执行时执行一次回调

$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});

---

在其他示例中，当页面刷新后，动画总是从页面顶部开始

我没有直接设置css的动画，而是调用

window.scrollTo（）在每个步骤上：

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

这也解决了
html
vs
body
的问题，因为它使用跨浏览器JavaScript

查看jQuery动画功能的更多信息。
如果要在页面末尾下移（因此不需要向下滚动到底部），可以使用：

$('body').animate({ scrollTop: $(document).height() });

很不错的。。不需要使用插件。为什么您需要
html
和
body
？这里有一些见解：，但这不是一个完整的答案。正文由webkit使用，html由firefox使用。仅供参考：如果
有
溢出-x:hidden此动画将不起作用。（可能不适用于
overflow-y:hidden
和
overflow:hidden
，但我还没有测试过。我认为
body
在今年早些时候在Chrome中工作过，但现在它必须是
html
。我在寻找一种“用jQuery为scrollTop设置动画”的方法，答案是“没有动画”这不是答案。问题是，为什么要设置“html，body”而不仅仅是“body”的动画？因为根据您所在的浏览器，您可以设置body或html的动画。通过设置两者的动画，您可以覆盖更多的浏览器。但在这种情况下，如果必须重复调用它，它实际上只会弹出一次（单击“事件打开”按钮）或者我遗漏了什么？是的，在这种情况下，它只会弹出一次。如果需要重复设置动画，您可以将completeCalled变量设置为执行动画函数的回调函数的本地变量。这样，当您单击时，它仍然只会弹出一次，但会再次弹出（仅一次）当您再次单击时。为了防止双重回调函数触发，您可以在
live（）
函数调用之前使用
die（）
handler将只被调用一次。scrollTo似乎不再是该站点的项目。完成此任务的代码非常简单。为什么要添加一个插件来完成可以用一行代码完成的任务？四年前，它并不是那么简单。：）使用promise（）这里是genius。这需要更多的支持。我以前从未见过promise用于此，这是我每隔几个月就会搜索的东西。正如艾伦所说，天才，回答得很好！很高兴您包括了持续时间选项。只想添加
$（“html，body”）.animate（{scrollTop:1024}，5000）也可以工作。
$('body').animate({ scrollTop: $(document).height() });

$(".scroll-top").on("click", function(e){
   e.preventDefault();
   $("html, body").animate({scrollTop:"0"},600);
});