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

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中。）

要在必要时查看时髦功能的示例，请参见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");
});