jQuery的fadeIn会导致页面滚动到顶部，我该如何解决？

Question

我有一个关于jQuery的fadeIn（或fadeOut）方法的问题。

我制作了一篇文章转换器，所有内容都正常工作，但是当页面滚动到底部并且文章旋转时，fadeIn（或fadeOut）方法会导致滚动到文章位置。

我认为这些方法会更改body的css top属性，但我不知道如何避免这种情况！有什么想法吗？

以下是代码：

    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，这是完整的网站！变量运行良好，没有问题...尝试缩小浏览器窗口并滚动到底部。

- Marco C

---

我知道答案，但在你发布一些代码之前我不能告诉你。 - mVChr

如果你知道答案，那么发帖的人与此有什么关系呢？ - iwasrobbed

现在我发布旋转函数的代码 - Marco C

我看不出这会如何影响滚动，但我可以告诉你要小心变量的定义方式和位置。如果 $currentArticle 没有在函数外部被定义（也不应该被定义），那么需要在函数定义的顶部使用 var 进行一次定义。比如 $do_animation 已经在哪里定义过了？但是为了解决你的问题：能否提供一个包含整个页面示例的链接？ - polarblau

你尝试过验证你的网站吗？标记包含许多“新”的标签，我个人以前从未见过（有人可以纠正我），肯定不是有效的XHTML。我会快速检查JS问题，但我不能确定它是否不是标记现在的问题：http://validator.w3.org/check?uri=http%3A%2F%2Fkario91.altervista.org%2Fultimate%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 - polarblau

Answer 1

我感觉这个问题是因为当你的文章完全消失时，就在回调函数被调用之前，页面的高度会减少（因为文章被隐藏了），因此浏览器会滚动到页面底部（没有文章的底部）正好在浏览器窗口底部。尝试在fadeOut完成后删除回调函数，你可能会注意到浏览器如何对齐底部。

我认为你可以通过在fadeOut开始之前给文章容器一个高度来解决这个问题，并在fadeIn开始后立即删除这个高度...或者类似的东西。

希望这能帮到你！

- Federico Cáceres

---

我曾经遇到类似的问题，通过在包含淡入淡出元素的 div 中设置“height”属性来解决。感谢你指引我正确的方向。 - Spike Williams

Answer 2

我用fadeTo()解决了它，大概是这样的：

备份你的位置

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

FadeOut:

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

要返回，请进行“半”淡入并通过回调将位置设置为：

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

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


});

然后它们完全消失

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

- Javier ML

Answer 3

将高度设置为父容器解决了问题。

- Miroslav