Jquery fadeIn 导致滚动顶部，我该如何解决？答案

【问题标题】：Jquery fadeIn cause a scroll top, how can i solve?Jquery fadeIn 导致滚动顶部，我该如何解决？
【发布时间】：2011-02-06 23:41:09
【问题描述】：

我对 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 这是完整的网站！变量工作正常，没有问题..尝试缩小浏览器窗口并滚动底部

【问题讨论】：

我知道答案，但在你发布一些代码之前我不能告诉你。
如果你知道答案，那贴代码的人跟它有什么关系？
现在贴出做旋转的功能代码
我看不出这会如何影响滚动，但我可以告诉您，您必须小心定义变量的方式和位置。如果$currentArticle 没有在函数外部定义（它不应该定义），那么在函数定义的顶部使用var 定义一次。这应该解释例如$do_animation 定义在哪里？ — 但是为了解决您的问题：您能否在某处为我们提供整个页面的示例？
好的，这里是网站kario91.altervista.org/ultimate 文字来自joomla 这是完整的网站！变量工作正常，没有问题..尝试缩小浏览器窗口并滚动底部

标签： jquery ajax fadein fadeout image-rotation

【解决方案1】：

我想说这个问题是因为当你的文章完全淡出时，就在调用回调之前，你的页面高度降低了（因为文章被隐藏了），因此，浏览器向上滚动，直到页面底部（没有文章）正好位于浏览器窗口的底部。尝试在fadeOut 完成后删除回调，您可能会注意到浏览器如何对齐底部。

我认为您可以通过在fadeOut 存在之前为文章容器设置一个高度来解决此问题，并且在fadeOut 完成后，在fadeIn 开始后立即删除此高度...或类似的东西。

我希望这会有所帮助！

【讨论】：

我遇到了类似的问题，并通过在 CSS 中为包裹我正在淡入和淡出的元素的 div 设置“高度”来解决它。感谢您为我指明正确的方向。

【解决方案2】：

我用fadeTo()解决了，是这样的

支持你的立场

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

淡出：

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

返回做一个“半”fadeIn 并回调位置：

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

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


});

它们完全消失

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

【讨论】：

【解决方案3】：

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

【讨论】：