javascript - How do I prevent the browser window from jumping back to the top of the page when when I open and close my panel? -

javascript - How do I prevent the browser window from jumping back to the top of the page when when I open and close my panel? -

i've been working on website has persistent header, navigation panel slides out of top of screen. works wrapping header , navigation panel in fixed div, , giving div negative top margin equal height of navigation.

the html

<div class="sticky"> <div class="above-header"> navigation panel. </div> <div class="header"> logo <a href="#" class="toggle">toggle</a> </div> </div>

the css

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

then utilize tiny js/jquery script alter margin 0, making navigation visible.

$('a.toggle').click(function() { if ($('.sticky').hasclass('open')){ $('.sticky').removeclass('open'); } else{ $('.sticky').addclass('open'); } });

i've got working fine except 1 problem: if open or close panel, view jumps top of page, regardless of i've scrolled to.

i've recreated a simplified version of problem on codepen demonstrate i'm talking about.

i cannot imagine why doing this, , google fu hasn't turned answers. thought can prepare problem? or perhaps there's improve technique i'm not aware of?

just prevent default action (nl navigating url + #)

$('a.toggle').click(function(e) { e.preventdefault(); $('.sticky').toggleclass('open'); });

and toggleclass option, can simplify phone call :)

javascript jquery html css