Slider在切换时会自动将页面拉回到顶部

Question

我们在我们的Drupal6站点上使用了最近修改过CSS的带有jQuery (http://demo.webdeveloperplus.com/featured-content-slider/)的特色内容旋转器。

如果用户向下滚动阅读页面底部的内容，一旦滑块自动移动到下一个内容片段，页面就会在每次切换时立即跳回到滑块容器的一半位置。

唯一不会发生这种情况的情况是查看器是登录的管理员(假设是因为额外的后端脚本在运行)。

你知道是什么导致了这一切吗?或者如何阻止它？

提前谢谢你！

<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

修复了！只需要设置旋转器的高度即可。

Answer 2

谢谢你的回答，Erin H。它的效果很神奇:)对于像我这样的新手来说，很难弄清楚它应该是什么样子。我已经在旋转器空间的末端添加了高度，它起作用了。

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