javascript - 打开和关闭面板时，如何防止浏览器窗口跳回页面顶部？

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

除一个问题外，我的工作正常:如果我打开或关闭面板，无论我滚动到哪里， View 都会跳到页面顶部。

我重新创建了 a simplified version of the problem在 Codepen 上演示我在说什么。

我无法想象它为什么这样做，我的 Google Fu 也没有找到任何答案。知道我能做些什么来解决这个问题吗？或者也许有一种我不知道的更好的技术？

Answer 1

只是阻止默认操作(nl 导航到您的 url + #)

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

并且使用 toggleClass 选项，您可以简化调用 :)