JQuery fadeIn calls the top of the scroll, how can I solve it?

Question

I have a problem with the jQuery fadeIn (or fadeOut) method. I am building an article rotator, everything works fine but there is a problem when the page scrolls from the bottom and the article rotates. The fadeIn (or fadeOut) method causes the article position to scroll. I think that these methods will change the css top property of the body, but I do not know how to avoid this! Any idea ???

here is the code

function rotate(direction) { if($('articles > article:visible:first') == 'undefined') $currentArticle = $('articles > article:first'); else $currentArticle = $('articles > article:visible:first'); if($currentArticle.attr('id') == $('articles > article:last').attr('id')) $next = $('articles > article:first'); else $next = $currentArticle.next(); if($currentArticle.attr('id') == $('articles > article:first').attr('id')) $prev = $('articles > article:last'); else $prev = $currentArticle.prev(); if($do_animation) { $currentArticle.fadeOut(1000,function(){ switch(direction) { case 1: $next.fadeIn(1000); break; case -1: $prev.fadeIn(1000); break; } if($('.rotate_show')) $('.rotate_show').removeClass('rotate_show'); $('article_number > btn[id|="'+$next.attr('id')+'"]').addClass('rotate_show'); }); } else return false; } 

ok here is the site http://kario91.altervista.org/ultimate text from joomla is the full site! the variables work fine, no problem .. try shrinking the browser window and scroll to the bottom

Answer 1

I am tempted to say that this problem is explained by the fact that when your article completely disappears, before calling the callback, the height of your page decreases (because the article is hidden), and because of this, the browser scrolls to the bottom of the page (without the article) right at the bottom of the browser window. Try removing the callback after fadeOut completes, and you may notice how the browser aligns the bottom.

I think you could fix this by giving the article container a height in front of the fadeOut creatures, and when fadeOut is complete, delete that height right after the start of fadeIn ... Or something like that.

Hope this helps!

Answer 2

I solved it with fadeTo (), it is something like this

Back up your line item

 $("#position").attr("name","scroll"+$("body").scrollTop()); 

Fadeout:

 $("#content").fadeOut(300,function(){........}); 

To go back, do a semi fadeIn and call back with:

 $("#content").fadeTo(10,0.1,function(){ $("body").scrollTop($("#position").attr("name").replace("scroll","")); }); 

and they completely disappear in

 $("#content").fadeTo(300,1); 

Answer 3

Adjusting the height of the parent container solved the problem.