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:

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

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

• javascript
• jquery
• html
• css
• drop-down-menu

• please share some code with respect to link for which you don't want to make scroll top on click of it. – Bhushan Kawadkar Commented Jun 18, 2014 at 5:44
• <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..au/development">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> – hedonist Commented Jun 18, 2014 at 5:55
• the specific link that causes the jump is <a href="#nav" title="show menu" class="menu-button"><img src="img/menu.png" alt="menu icon"></a> – hedonist Commented Jun 18, 2014 at 6:00
• here is the script I'm using: <script src="js/doubletaptogo.js"></script> <script> $( function() { $( '#nav li:has(ul)' ).doubleTapToGo(); }); </script> – hedonist Commented Jun 18, 2014 at 6:03
• script is applied to id="nav" and not to href="#nav". I think you can put href="javascript:void(0)" and it should work like expected. just try it once. – Bhushan Kawadkar Commented Jun 18, 2014 at 6:06

5 Answers 5

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

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

I can see what the issue is here.. You have defined the nav further down the page under the main site image, have you tried moving it right at the top of the page so it defaults to this place?

Also have you tried alternatives - I have achieved this same thing using bootstrap:

<nav id="Navbar" class="navbar navbar-fixed-top navbar-inverse" role="navigation" >

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="define-spinner">

            </div>
            <a class="homeLogo" href="#/"><i class="fa fa-home fa-2x icon-color fa-inverse"></i></a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
        <ul class="nav navbar-nav">
            <li class="controller">
                <div id="h2Header"><g:message code="default.title" args="[meta(name:'app.name')]"/> </div>

            </li>

         </ul>
         <ul  class="nav navbar-nav navbar-right" >

            <li  class="dropdown controller">
                <a class="dropdown-toggle" role="button" data-toggle="dropdown">
                    <span id="userMessage">
                        <span class="glyphicon glyphicon-user"></span>
                            <g:message code="default.user.label" default="{{user.username}}" />
                        </span>
                        <b class="caret"></b>
                </a>
                <ul class="dropdown-menu dropdown-menu-dark" role="menu">
                    <li>
                        <a class="fa fa-gear icon-color" onclick='window.location.href="#/updateusername"' title="${message(code: 'default.username.update', default: 'Update Username')}">
                            <g:message code="default.username.update"  default="Update Username"/>  
                        </a>
                    </li>
                    <li>
                        <a class="fa fa-gear icon-color" onclick='window.location.href="#/updatepassword"' title="${message(code: 'default.password.update', default: 'Update password')}">
                            <g:message code="default.password.update"  default="Update Password"/>  
                        </a>
                    </li>
                </ul>
            </li>
            <li class="controller">
                <a data-ng-controller='UserCtrl' data-ng-click='logout()' title="${message(code: 'security.signoff.label', default: 'Log out')}">
                    <span class="glyphicon glyphicon-log-out"></span> <g:message code="security.signoff.label" default="Sign Off"/>
                </a>
            </li>



        </ul>
        </div>
    </div>
</nav>

OK I finally figured this out. Turns out that doubletaptogo.js only works when the nav is at the top of the page and there is no way around this; if the nav is below any other content such as header etc forget about using this script as it will always cause the nav to jump to the top of the page.

I have opted for an alternative drop down that simply uses html and css, no js or jquery needed for this.

See http://goligraphist..au/development/ for the update.

That's the end of a major headache.

You can call void(0) for the link like below :

<a href="javascript:void(0)">Clickc heere 1</a>

or use e.preventDefault();

 $('a[href="#"]').click(function(e){
  e.preventDefault();
});

JSFiddle Demo

I think the right way is to write the full URL before the hash (#)

PHP:

<?php
  $currentPage = 'http' . ($_SERVER["HTTPS"] && $_SERVER["HTTPS"] != 'off' ? 's' : '') . '://';
  $currentPage .= $_SERVER["HTTP_HOST"] . htmlentities($_SERVER["REQUEST_URI"], ENT_QUOTES);
?>

<a href="<?php echo $currentPage; ?>#nav" title="show menu" class="menu-button">

<a href="<?php echo $currentPage; ?>#" title="hide menu" class="menu-button">

Smarty:

<a href="http{if $smarty.server.HTTPS}s{/if}://{$smarty.server.HTTP_HOST|cat:$smarty.server.REQUEST_URI|htmlentities:$smarty.const.ENT_QUOTES}#nav" title="show menu" class="menu-button"> .. </a>

<a href="http{if $smarty.server.HTTPS}s{/if}://{$smarty.server.HTTP_HOST|cat:$smarty.server.REQUEST_URI|htmlentities:$smarty.const.ENT_QUOTES}#" title="hide menu" class="menu-button"> .. </a>