跨浏览器 jquery 动画滚动顶部

Question

我在使用 jquery animate scrollTop 到定义的 div 时遇到问题。

我使用这段代码为滚动设置动画：

$('body').animate({scrollTop: $('#sections_display').offset().top-100}, 500, function(){
    $('#ajax_load').load('file.php');
});

但这在 Firefox 或 IE 中不起作用。

当我使用 $('html').animate 而不是 $('body').animate 时，它在 Chrome 中不起作用。

我也尝试同时使用这两者：$('html,body').animate，但问题是回调函数 $('#ajax_load').load('file.php'); 被执行了两次，这调用了文件 2 次。

我通过使用 php 临时解决了这个问题，但是这个解决方案迫使我在每个页面中重复代码 2 次，以创建 2 个支持 $('body').animate 和 $('html').animate 的浏览器数组。

我在这里搜索并找到了这个：jquery animate scrolltop callback 但没用。

我也试过了：

$(window).animate

$(document).animate

$('#container-div').animate

但没有办法做到这一点。

我能找到一个跨浏览器的方法来实现这个吗？

Answer 1

Hacky 解决方案可能会成功...

$('html,body').animate({scrollTop: $('#sections_display').offset().top-100}, 500);

setTimeout(function(){
    $('#ajax_load').load('file.php');
}, 500);

Answer 2

如this post中所述

它不适用于所有主流浏览器。当应用于“html”时，并非所有这些都支持滚动，有些需要“body”。这取决于您是否处于怪癖模式。动画 iframe 时问题更大

主题启动器最终将动画应用于html,body，而不是彼此。