更改固定元素的內容時不希望的頁面滾動

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