Slider automatically pulls page back towards the top when it switches

Question

We're using a recently CSS-modified Featured Content Rotator with jQuery (http://demo.webdeveloperplus.com/featured-content-slider/) on our Drupal 6 site.

If a user scrolls down to read things towards the bottom of the page, once the slider automatically shifts to the next content fragment the page instantly jumps back up to halfway up the slider container every time it switches.

The only time this doesn't happen is when the viewer is a logged-in admin (assuming because of the extra back-end scripts running).

Any idea what could cause this or how to stop it?

Thanks so much in advance!

<script type="text/javascript">
$(document).ready(function(){
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
<div id="featured">
<ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
        <a href="#fragment-1"><img alt="" src="image-tn-1.jpg" /><span>Title 1</span></a></li>
    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-2">
        <a href="#fragment-2"><img alt="" src="image-tn-2.jpg" /><span>Title 2</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-3">
        <a href="#fragment-3"><img alt="" src="image-tn-3.jpg" /><span>Title 3</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-4">
        <a href="#fragment-4"><img alt="" src="image-tn-4.jpg" /><span>Title 4</span></a></li>
</ul>
<!-- First Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-1" style="">
    <a href="/" onClick="_gaq.push(['_trackEvent', 'Rotator', 'Image', 'Content-1']);"><img src="image-1.jpg" /></a>
</div>
<!-- Second Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-2" style="">
    <a href="/" onClick="_gaq.push(['_trackEvent', 'Rotator', 'Image', 'Content-2']);"><img src="image-2.jpg" /></a>
</div>
<!-- Third Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-3" style="">
    <a href="/" onClick="_gaq.push(['_trackEvent', 'Rotator', 'Image', 'Content-3']);"><img src="image-3.jpg" /></a>
</div>
<!-- Fourth Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-4" style="">
    <a href="/" onClick="_gaq.push(['_trackEvent', 'Rotator', 'Image', 'Content-4']);"><img src="image-4.jpg" /></a>
</div>
</div>

Answer 1

Fixed! Just needed to set a height for the rotator space.

Answer 2

thank you for your answer Erin H. it worked marvels :) for the new ones that like me had a difficult time figurring it out this is how it should look. i've added the height at the end of the rotator space and it worked.

#rotator {
    background:#FFF;
    color:#000; 
    position:relative;
    padding-bottom:2.6em;
    margin:0; 
    font-size:16px;
--> height:275px;
}