jQuery的淡入导致滚动顶部，我该如何解决？ [英] Jquery fadeIn cause a scroll top, how can i solve?

问题描述

我有jQuery的淡入（或淡出）方法的问题。 我建立了一篇文章肩，一切工作正常 但有一个问题，当页面滚动底部和制品转动， 该淡入（或淡出）方法会导致滚动文章的位置。 我认为这些方法，改变身体的CSS top属性， 但我不知道如何避免这种情况！ 任何想法???

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???

这里的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;
}

确定这里的网站 http://kario91.altervista.org/ultimate 文字是从的Joomla这是完整的网站！变量做工精细，没有任何问题......尽量减少浏览器窗口，滚动底部

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

推荐答案

我觉得很想说，这个问题是由于这样的事实，当你的文章淡出彻底，回调被调用之前，你的页面的高度减少（因为文章是隐藏的），正因为如此，在浏览器向上滚动，直到页（没有物品）的底部是正确的，在浏览器的窗口的底部。请尝试去除后回调淡出完成后，你可能会注意到浏览器如何对齐底部。

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.

我希望这有助于！

这篇关于jQuery的淡入导致滚动顶部，我该如何解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！