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 =＆＃34;＃＆＃34;并替换为href =＆＃34; javascript：void（0）＆＃34; - 开发移动设备时的良好做法。

其次，请尝试（所以我正在做的是我阻止了浏览器设置为取消它的默认操作，这样当你点击#menu时它不会到达顶部，因为当你正常点击锚链接它默认操作是刷新页面或转到顶部（在不同的浏览器中有所不同）

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

}

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

1 个答案: