jQuery fadeIn fadeOut làm cho trang cuộn

Question

Tôi có trang web hỗ trợ wordpress nơi tôi muốn tạo một khối nổi bật. Khối nổi bật này sẽ có các bài viết nổi bật mờ dần từng cái một. Tôi nhận nó hoạt động bằng cách sử dụng các API fadeIn và fadeOut của jQuery, nhưng có một vấn đề với việc triển khai.

Đây là mã tôi có -

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

Các fadeIn - hiệu ứng fadeOut đang làm việc tốt cho đến khi người dùng điều hướng đến dưới cùng của trang. Khi người dùng ở cuối trang, toàn bộ trang cuộn lên khi chuyển đổi mờ dần xảy ra.

Bạn có thể thấy điều này trong hành động ở http://www.ronakg.com

Xin tư vấn làm thế nào tôi có thể tránh được cuộn trang.

EDIT: Đây là cách mã HTML trông giống như -

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

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

... 

Answer 1

Cố gắng đưa ra các yếu tố chứa trong các khối phai trong và fadeOut một tĩnh height: thuộc tính với CSS.

Bọc <div id="featured"> khối bằng div khác.

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

Answer 2

Nếu bạn đang sử dụng <a> với href iqual đến "#", chỉ cần trả về false; ở cuối hàm featured_block của bạn sẽ giải quyết vấn đề.