打開和關閉面板時，如何防止瀏覽器窗口跳回到頁面頂部？

Question

我一直在一個網站上工作，該網站具有永久標題，並且導航面板可以滑出屏幕頂部。 當前，它的工作原理是將標題和導航面板包裝在固定的div中，並賦予該div負的上邊距，該寬度等於導航的高度。

HTML

<div class="sticky">
  <div class="above-header">
    This is the navigation panel.
  </div>

  <div class="header">
    This is a logo
    <a href="#" class="toggle">Toggle</a>
  </div>
</div>

CSS

.sticky {
  height:300px;
  margin:-250px 0 0;
  position:fixed;
  z-index:1000;
}

.above-header {
  height:250px;
}

.header {
  height:50px;
}

.open {
  margin:0
}

然后，我使用一個微型js / jquery腳本將該邊距更改為0，從而使導航可見。

$('a.toggle').click(function() {
    if ($('.sticky').hasClass('open')){  
        $('.sticky').removeClass('open');
      }
      else{
        $('.sticky').addClass('open');
      }
});

除一個問題外，我的工作正常：如果打開或關閉面板，則無論滾動到何處，視圖均跳至頁面頂部。

我在Codepen上重新創建了該問題的簡化版本，以演示我在說什么。

我無法想象為什么這樣做，而我的Google Fu還沒有提供任何答案。 任何想法我可以做些什么來解決此問題？ 也許有一種我不知道的更好的技術？

Answer 1

代替

<a href="#">

采用

<a href="javascript:void(0);">

Answer 2

只需阻止默認操作即可（nl導航至您的url +＃）

$('a.toggle').click(function(e) {
    e.preventDefault();
    $('.sticky').toggleClass('open');
});

並使用toggleClass選項，您可以簡化通話:)