javascript - 带有固定顶栏的移动滑动菜单

Question

我在响应式网站上使用移动设备的滑动菜单。问题是，当您向下滚动然后单击打开菜单按钮时，页面会跳到顶部，而不是停留在您单击打开菜单按钮的同一位置。

这里是我使用的代码 http://jsfiddle.net/miscky/35shP/

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<style>
body{
    margin:0;
    }
#nav{
    width:75%;
    left:-75%;
    position:fixed;
    z-index:-1;
    background:#000;
}
#nav a{
    color:#fff;
}
#mobTopBar{
    width:96%;
    padding:2%;
    position:fixed;
    top:0;
    z-index:999;
    background:#ededed;
}
#mobTopBar a{
    color:#fff;
    padding:5px;
    background:#333;
}
#content-wrapper{
    background:#fff;
    margin-top:25px;
    width:96%;
    padding:2%;
    position:relative;
    float:left;
    }
.open-menu,
.open-menu #content-wrapper{
    position:absolute;
    overflow:hidden;
}

</style>

            <header>

            <div id="mobTopBar">
                <a href="#" id="menu" class="ico-menu">Menu</a>
            </div>

            <nav id="nav">
                <ul>
                    <li><a href="#">Button 1</a></li>
                    <li><a href="#">Button 2</a></li>
                    <li><a href="#">Button 3</a></li>
                    <li><a href="#">Button 4</a></li>
                    <li><a href="#">Button 5</a></li>
                    <li><a href="#">Button 6</a></li>
                    <li><a href="#">Button 7</a></li>
                    <li><a href="#">Button 8</a></li>
                </ul>
            </nav>

        </header>

        <div id="content-wrapper">

            <section>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum, dolor id tempor cursus, metus diam accumsan leo, sed lacinia risus est eu erat. Suspendisse potenti. Vestibulum erat nibh, eleifend vitae ultrices et, blandit in quam. Quisque dapibus volutpat dictum. Maecenas fringilla nisl vitae mauris venenatis, eget pharetra lectus auctor. Ut nisi urna, venenatis non mi ac, congue aliquam nibh. Donec ornare dictum lectus pellentesque suscipit. Vestibulum consequat hendrerit nunc sit amet molestie. Phasellus iaculis id turpis vel viverra. Fusce euismod sodales nunc ac fringilla. Nunc feugiat diam arcu, in bibendum nisi ornare id.</p>
            </section>
        </div>

    <script>
$(document).ready(function() {

  TriggerClick = 0;
  $('a#menu').click(function(){
    if(TriggerClick==0){
         TriggerClick=1;
         $('body').addClass('open-menu');
         $('#nav').animate({left:'0%'}, 200);
         $('#content-wrapper').animate({marginLeft:'75%'}, 200);
         $('#mobTopBar').animate({marginLeft:'75%'}, 200);
         $(window).resize(function() {
           $('body').height($(window).height());
           $('body').width($(window).width());
         });
         $(window).trigger('resize');
    }else{
         TriggerClick=0;
         $('body').removeClass('open-menu');
         $('#nav').animate({left:'-75%'}, 1);
         $('#content-wrapper').animate({marginLeft:'0%'}, 1);
         $('#mobTopBar').animate({marginLeft:'0%'}, 1);
         $(window).resize(function() {
           $('body').height('auto');
           $('body').width('auto');
         });
         $(window).trigger('resize');
    };

    return false;
  });

  $(window).resize(function() {
    $('#content-wrapper').height($(window).height());
    $('#nav').height($(window).height());
    $('#content-wrapper section').height($(window).height());
  });
  $(window).trigger('resize');

});
</script>

我花了一天时间尝试解决以下问题但没有成功，因此非常感谢您的帮助。

提前致谢!

Answer 1

首先删除 href="#"并替换为 href="javascript:void(0)"- 为移动设备开发时的良好做法。

其次，请尝试(所以我正在做的是阻止浏览器设置为取消它的默认操作，这样当您单击 #menu 它不会转到顶部，因为当您正常单击 anchor 链接，默认操作是刷新页面或转到顶部(因浏览器而异)

$('#menu').on('click',function(e){ 
   e.preventDefault() ... //your remaning code

}