Page jumps to the top
I am having trouble figuring something out. I am using jquery to toggle the display of a div when the mobile menu button is clicked. It works fine, but I have a fixed positioned menu so it scrolls with the screen. When you click the mobile menu to show the div the page jumps up to the top. Is there a way to keep it from jumping?
jquery:
html:
CSS:
jquery:
Code:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
$( "#MobileButton" ).click(function() {
$( "#MobileMenu" ).toggle();
});
});
</script> Code:
<a id="MobileButton" href="#">Show/Hide</a> <div id="MobileMenu">Menu Goes Here</div>
Code:
#MobileButton {
}
#MobileMenu {
width: 100%;
background-color: #000;
height: 100px;
display: none;
position: fixed;
z-index: 2;
margin-top: 100px;
}
.NavigationMobileScreenWrapper {
float: left;
width: 15%;
max-width: 30px;
margin-top: 40px;
margin-left: 10%;
}
.FloatingLogoAndNavigationWrapper {
width: 100%;
height: 110px;
background-color: #333333;
position: fixed;
top: 0;
z-index: 2;
} -
cisrony -
Thanks - 1 reply
{{ DiscussionBoard.errors[10146922].message }}-
jbearnolimits -
Thanks
Signaturehttp://onthelineministries.com{{ DiscussionBoard.errors[10147354].message }} -
-
-
jbearnolimits -
Thanks
Signaturehttp://onthelineministries.com{{ DiscussionBoard.errors[10148127].message }} -
-
kami2k -
Thanks
{{ DiscussionBoard.errors[10148336].message }} -