Cross browsers jquery animate scrollTop

Question

I am having a problem with jquery animate scrollTop for a specific div.

I use this code to animate scroll:

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

But this does not work in Firefox or in IE.

And when I use $('html').animate instead of $('body').animate , it does not work in Chrome.

I also tried using both: $('html,body').animate , but the problem is that the callback function is $('#ajax_load').load('file.php'); executed twice, and this call invokes the file 2 times.

I temporarily solved the problem using php , but this solution made me repeat the code 2 times on each page to create 2 arrays of browsers that support $('body').animate and $('html').animate .

I searched here and found this: jquery animate scrolltop callback But it didn't work.

I also tried:

$(window).animate

$(document).animate

$('#container-div').animate

But not for that.

Can I find a cross browser method to achieve this?

Answer 1

Hacky's solution can do the trick ...

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

Answer 2

As mentioned in this post

It will not work in all major browsers. Not all of them support scrolling when applied to "html", some require a "body". It depends on whether you are in quirks mode or not. This is even more problematic when animating iframes

The test start eventually applied the animation to html,body instead of each other.