clicking on drop down menu with href="#nav" using doubletaptogo.js causes page to jump down

Question

I have a responsive page with a drop down navigation using doubletaptogo.js, problem is when I click on the #nav link to show the drop down items this causes the page to scroll down so the menu is now at the top of the page.

here is the page: http://goligraphist.com.au/development

I have found that when I remove all the content below the nav this issue is fixed but this obviously isn't an option. I'm new to javascript and this has really got me stuck, any ideas?

Sample Code :

<nav id="nav" role="navigation"> 
   <a href="#nav" title="show menu" class="menu-button">
      <img src="img/menu.png" alt="menu icon">
   </a> 
   <a href="#" title="hide menu" class="menu-button">
     <img src="img/menu.png" alt="menu icon">
   </a> 
   <ul> 
      <li class="active">
         <a href="goligraphist.com.au/development">Home</a>
      </li>
      <li>
       <a href="#">Portfolio</a>
     </li> 
     <li> 
       <a href="#">Contact</a>
     </li> 
   </ul> 
 </nav>

jQuery Script :

<script src="js/doubletaptogo.js"></script> 
<script> 
  $( function() { 
      $( '#nav li:has(ul)' ).doubleTapToGo(); 
  }); 
</script>

Answer 1

Putting the following code within DOM ready should stop your page from jumping:

$('[href^=\\#]').on('click', function(event){
     event.stopPropagation();
});