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

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