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>

```