jQuery fadeIn fadeOut makes page scroll

I have wordpress enabled website where I want to create a featured block. This featured block will have featured articles fading one after another. I got it working by using the fadeIn and fadeOut APIs of jQuery, but there is a problem with the implementation.

Here is the code I have -

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

The fadeIn – fadeOut effect is working fine till the user navigates to the bottom of the page. When the user is at the bottom of the page, the entire page scrolls up when the fade switch happens.

You can see this in action at http://www.ronakg.com

Please advice how can I avoid the page scroll.

newest questions tagged jquery – Stack Overflow

About Admin