更改固定元素的内容时不希望的页面滚动

Question

所以我做了一个菜单排序的东西，通过CSS固定位置贴在屏幕的底部，它工作正常。唯一的问题是，当页面向下滚动一些，然后激活菜单（使用jQuery向上滑动）时，页面会再次跳转到顶部。这很刺激。下面是一些相关的代码：

//handle click on stats tab 
$('a.stats').click(function(e) { 
    if ($('#menuWrapper').hasClass("stats")) { 
     $('#menuWrapper').removeClass("stats") 
     .removeClass("open") 
     .animate({ bottom: '-100px'}, 300); 
    } else if (!$('#menuWrapper').hasClass("open")) { 
     $('#sponsors').hide(); 
     $('#feedback').hide(); 
     $('#stats').show(); 
     $('#menuWrapper').animate({ bottom: '0px'}, 300) 
     .addClass("stats") 
     .addClass("open"); 
    } else { 
     $('#menuWrapper').addClass("stats"); 
     $('#sponsors').fadeOut(); 
     $('#feedback').fadeOut(); 
     $('#stats').fadeIn(); 
    } 
    $('#menuWrapper').removeClass("sponsors") 
    .removeClass("feedback"); 
}); 

（这是我如何改变内容一个例子，我有哪些改变内容或最小化菜单根据其当前的状态类似的功能。）

<div id="menuWrapper"> 

    <div id="menuTop"> 
     <a href="#" class="sponsors">Sponsors</a> | <a href="#" class="feedback">Feedback</a> | <a href="#" class="stats">Stats</a> 
    </div> 

    <div id="menuContent"> 
     <div id="sponsors"></div> 
     <div id="feedback"></div> 
     <div id="stats"></div> 
    </div> 

</div> 

（在HTML内容被动态加载到赞助商，反馈和统计div之前，这就是HTML的样子）。

如果需要查看时髦功能的示例，请参阅http://www.crowdsplat.com/alpha。如果您对可能造成这种情况和/或如何解决问题有任何了解，我将不胜感激。谢谢你的时间。

Answer 1

尝试从你的点击函数返回false或使用event.preventDefault()避免浏览器试图跟随我以为是导致跳转到顶部的链接，如果你有一个无效的书签如HREF =“＃”

如

$('a.stats').click(function(e) { 
    e.preventDefault(); 
    if ($('#menuWrapper').hasClass("stats")) { 
     $('#menuWrapper').removeClass("stats") 
     .removeClass("open") 
     .animate({ bottom: '-100px'}, 300); 
    } else if (!$('#menuWrapper').hasClass("open")) { 
     $('#sponsors').hide(); 
     $('#feedback').hide(); 
     $('#stats').show(); 
     $('#menuWrapper').animate({ bottom: '0px'}, 300) 
     .addClass("stats") 
     .addClass("open"); 
    } else { 
     $('#menuWrapper').addClass("stats"); 
     $('#sponsors').fadeOut(); 
     $('#feedback').fadeOut(); 
     $('#stats').fadeIn(); 
    } 
    $('#menuWrapper').removeClass("sponsors") 
    .removeClass("feedback"); 
});