jQuery 的 fadeIn 和 fadeOut 会导致页面滚动。

Question

我有一个启用了WordPress的网站，我想创建一个特色块。这个特色块将悬浮着推荐文章。通过使用jQuery的fadeIn和fadeOutAPI，我已经成功实现了文章的淡入淡出效果，但是实现中存在问题。

以下是我的代码 -

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);
}

“淡入淡出”特效在用户滚动至页面底部时出现滚动问题。当用户在页面底部时，淡出特效发生时整个页面会向上滚动。

你可以在http://www.ronakg.com网站上看到这种情况。

请问我应该如何避免页面滚动？

编辑：以下为HTML代码示例-

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

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

...

- ronakg

---

我不认为问题出在那里，因为没有任何迹象表明那是问题所在。为了证明这一点，请注释掉行 jQuery(document).ready(featured_block);，使其看起来像这样 //jQuery(document).ready(featured_block);，然后向下滚动页面，在页面底部，如果页面跳跃，则您的问题不是由于淡入/淡出，而是其他地方出了问题；否则，您可以尝试在特色块和/或回调函数上使用 return false。 - Val

Answer 1

尝试使用CSS为淡入淡出的块的包含元素设置静态的height:属性。

用另一个div包装<div id="featured">块。

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

- Chris G.

---

在这种情况下会发生的是，推荐区块会在不同的位置淡入淡出，而不是原地。我使用 style="display:none" 在网站首次加载时隐藏其他区块。 - ronakg

啊。然后这些块当然需要设置为 position: absolute;，这样它们就可以在同一位置淡入淡出了。 - Chris G.

position: absolute 做到了这一点。然而，我不得不相应地调整其他元素，因为现有的结构是相对的。 - ronakg

Answer 2

如果您正在使用 href 等于 "#" 的 <a>，只需在 featured_block 函数的末尾放置 return false; 即可解决该问题。

- lwdias