jQuery fadeIn fadeOut 使页面滚动

Question

我有一个启用 WordPress 的网站，我想在其中创建一个特色 block 。这个特色区 block 将有一篇又一篇的特色文章消失。我通过使用 jQuery 的 fadeIn 和 fadeOut API 使其工作，但实现存在问题。

这是我的代码-

var count=0;
var sticky_count=<?php echo count($sticky);?>;

jQuery(document).ready(featured_block);

function featured_block() {   
    jQuery(".featured" + count % sticky_count).delay(5000).fadeOut(callback);
}

function callback() {
    count++;
    jQuery(".featured" + count % sticky_count).fadeIn().delay(5000);
    jQuery(".featured" + count % sticky_count).fadeOut(callback);
}

fadeIn - fadeOut 效果工作正常，直到用户导航到页面底部。当用户位于页面底部时，淡入淡出切换时整个页面会向上滚动。

您可以在http://www.ronakg.com查看此操作的实际效果。

请告诉我如何避免页面滚动。

编辑:HTML 代码如下所示 -

<div class="featured0">
    ...
</div>

<div class="featured1" style="display:none">
    ...
</div>

...

Answer 1

尝试为淡入和淡出 block 的包含元素赋予静态 height:带有 CSS 的属性。

换行<div id="featured">用另一个 div block 。

<div id="rotator" style="height: 340px;">
    <div id="featured">
     ...
    </div>
</div>