Question

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

Answer 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!