CODEWITHSUNDEEP
javascriptjqueryscrolltop
semsem
semsem

Reputation: 1192

cross browsers jquery animate scrollTop

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?

Upvotes: 6

Views: 2317

Answers (2)

trapper
trapper

Reputation: 11993

Hacky solution might do the trick...

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

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

Upvotes: 1

321X
321X

Reputation: 3185

As mentioned in this post

It won't work on all major browsers. Not all of them support scrolling when applied to 'html', some require 'body'. This varies depending on whether you're on quirks mode or not. It's even more problematic when animating iframes

The topic starter ended up applying the animate to html,body instead of one another.

Upvotes: 1

Related Questions