Мобильное меню слайдов с фиксированной верхней панелью

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, она не переходит на верх, потому что когда вы нормальный клик по привязке к нему привязывает действие по умолчанию, чтобы обновить страницу или перейти к началу (зависит от разных браузеров)

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

}