Jquery fadeIn cause a scroll top, how can i solve?

问题

i have a problem with jQuery fadeIn(or fadeOut) method. i build an article rotator , all works fine but there is a problem when the page is scrolled bottom and the article rotate, The fadeIn (or fadeOut) method causes a scroll to the article position. I think that these methods ,changes the css top property of body, but I do not know how to avoid this! Any idea???

here 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 the site http://kario91.altervista.org/ultimate the text is from joomla this is the complete site! the variables work fine, there's no problem.. try to reduce the browser window and scroll bottom

回答1:

I feel tempted to say that this issue is due to the fact that when your article fades out completely, just before the callback is called, the height of your page is reduced (because the article is hidden) and because of that, the browser scrolls up until the bottom of the page (without the article) is right at the bottom of the browser's window. Try removing the callback after the fadeOut is completed, and you might notice how the browser aligns the bottom.

I think you could fix this by giving the article container a height before the fadeOut beings, and when the fadeOut is completed, remove this height right after the fadeIn begins... Or something like that.

I hope this helps!

回答2:

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

Backup your position

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

FadeOut:

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

To go back do a "semi" fadeIn and callback the position with:

$("#content").fadeTo(10,0.1,function(){

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


});

and them fade completly in

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

回答3:

Setting height to parent container solved the problem.

来源：https://stackoverflow.com/questions/4916992/jquery-fadein-cause-a-scroll-top-how-can-i-solve

标签

jquery

ajax

fadein

fadeout

image-rotation