cross browsers jquery animate scrollTop

Question

I'm facing a problem with jquery animate scrollTop to a defined div.

I use this code to animate the scroll:

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

But this don't work in Firefox or in IE.

And when i use $('html').animate instead of $('body').animate it don't work in Chrome.

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

I temporary solved the problem by using php but this solution forced me to repeat code 2 times in every page to make 2 arrays of browsers which support $('body').animate and $('html').animate.

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

I also tried:

$(window).animate

$(document).animate

$('#container-div').animate

But no way to achieve this.

Can i find a cross browser method to achieve this?

Answer 1

Hacky solution might do the trick...

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

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