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次，以制作支持$('body').animate和$('html').animate的2个浏览器阵列

我在这里搜索并发现：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而不是彼此。

跨浏览器jquery animate scrollTop

2 个答案: