试试scrollTo插件。

就像Kita提到的有多个回调发射的问题，当你在“html”和“身体”动画。我更倾向于使用一些基本的特征检测，只对单个对象的scrollTop属性进行动画处理，而不是同时对两者进行动画处理并阻塞后续的回调。

在这个另一个线程上接受的答案给出了一些关于哪个对象的scrollTop属性我们应该尝试动画:pageYOffset滚动和动画在IE8

// UPDATE: don't use this... see below
// only use 'body' for IE8 and below
var scrollTopElement = (window.pageYOffset != null) ? 'html' : 'body';

// only animate on one element so our callback only fires once!
$(scrollTopElement).animate({ 
        scrollTop: '400px' // vertical position on the page
    },
    500, // the duration of the animation 
    function() {       
        // callback goes here...
    })
});

更新- - -

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

$('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的animate函数的更多信息，请访问http://james.padolsey.com/javascript/fun-with-jquerys-animate/。

你可以使用.animate() scrollTop属性，就像这样:

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

试试scrollTo插件。

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