Javascript 带有固定顶栏的移动幻灯片菜单

我正在我的响应式网站上使用手机的幻灯片菜单。问题是，当您向下滚动并单击“打开菜单”按钮时，页面会跳转到顶部，而不是停留在与单击“打开菜单”按钮相同的位置

这里是我正在使用的代码

身体{
保证金：0；
}
#导航{
宽度：75%；
左-75%；
位置：固定；
z指数：-1；
背景：#000；
}
#导航a{
颜色：#fff；
}
#mobTopBar{
宽度：96%；
填充：2%；
位置：固定；
排名：0；
z指数：999；
背景：#ededed；
}
#mobTopBar a{
颜色：#fff；
填充物：5px；
背景：#333；
}
#内容包装器{
背景：#fff；
边缘顶部：25px；
宽度：96%；
填充：2%；
位置：相对位置；
浮动：左；
}
.打开菜单，
.打开菜单#内容包装{
位置：绝对位置；
溢出：隐藏；
}










Lorem ipsum dolor sit amet，是一位杰出的献身者。这句话的主旨是，多罗是暂时的，多罗是狮子座的，多罗是最古老的。潜力悬钩子。前庭有两个房间，一个房间有两个房间。这是一句名言。Maecenas fringilla nisl vitae mauris venenatis，eget pharetra lectus auctor。但尼西乌尔纳，威尼斯人非米ac，康格阿利夸姆尼布。不，不，不，不。前庭位于一个小房间内。伊库利氏沼虾（Phasellus iaculis id turpis vel viverra）。Fusce euismod sodales nunc ac fringilla。比本杜姆·尼西·奥纳雷（bibendum nisi ornare id）的努克·费吉亚·迪亚姆·阿库（Nunc feugiat diam arcu）

$（文档）.ready（函数（）{
TriggerClick=0；
$（'a#菜单'）。单击（函数（）{
如果（TriggerClick==0）{
TriggerClick=1；
$（'body'）.addClass（'open-menu'）；
$（#nav'）。动画（{左：'0%}，200）；
$（“#内容包装器”）.animate（{marginLeft:'75%”，200）；
$（'mobTopBar'）.animate（{marginLeft:'75%'），200）；
$（窗口）。调整大小（函数（）{
$（'body'）.height（$（window.height（））；
$（'body'）.width（$（window.width（））；
});
$（window.trigger（'resize'）；
}否则{
TriggerClick=0；
$（'body'）.removeClass（'open-menu'）；
$（#nav'）。动画（{左：'-75%}，1）；
$（“#内容包装器”）.animate（{marginLeft:'0%'），1）；
$（'mobTopBar'）。动画（{marginLeft:'0%'），1）；
$（窗口）。调整大小（函数（）{
$（'body'）。高度（'auto'）；
$（'body'）.width（'auto'）；
});
$（window.trigger（'resize'）；
};
返回false；
});
$（窗口）。调整大小（函数（）{
$（'#内容包装器'）.height（$（window.height（））；
$（'#nav'）.height（$（window.height（））；
$（'#内容包装部分'）.height（$（window.height（））；
});
$（window.trigger（'resize'）；
});

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

提前谢谢你

首先删除href=“#”并替换为href=“javascript:void（0）”-为移动设备开发时的良好做法

第二，请尝试（因此我正在做的是阻止浏览器设置为取消它的默认操作，这样当您单击#菜单时，它不会进入顶部，因为当您正常单击锚定链接时，默认操作是刷新页面或进入顶部（在不同的浏览器中有所不同）

---

我没有收到一条信息，这有什么不对吗？

<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>

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

}