jquery: hashchange, empêche de sauter en hash

Question

J'ai une fonction hashchange configurée pour afficher/masquer différentes sections d'une page à peu près sans avoir 7 pages séparées. Tout fonctionne bien, très bien, il y a juste une petite chose qui me dérange, quand le contenu pertinent est affiché à l'écran, par exemple: #about01 si vous cliquez à nouveau sur le bouton de menu, le navigateur saute vers le haut de cette div, Je ne veux pas arriver.
Voici mon jQuery:

jQuery(document).ready(function(){ 

    jQuery(window).on('hashchange', function(){ 
     var hashFound = determineContent(); 
     if(hashFound) return false; 
    }); 

    function determineContent(){ 

     var hash = window.location.hash; 
     jQuery('.about').hide(); 

     jQuery('.sub-menu').each(function(){ 

      if (jQuery(this).attr('hook') === hash.replace('#about', '')) { 
       jQuery('#about'+jQuery(this).attr('hook')).fadeIn(); 
       return true; 
      } 
     }); 

     jQuery('html, body').animate({scrollTop:0}, 'slow'); 
     return false; 
    } 

    determineContent(); 
}); 

HTML:

<div id="sub-menu"> 
     <li id="sub-menu-01" class="sub-menu" hook="01"><a href="#about01">TEST</a></li> 
     <li id="sub-menu-02" class="sub-menu" hook="02"><a href="#about02">TEST</a></li> 
     <li id="sub-menu-03" class="sub-menu" hook="03"><a href="#about03">TEST</a></li> 
     <li id="sub-menu-04" class="sub-menu" hook="04"><a href="#about04">TEST</a></li> 
     <li id="sub-menu-05" class="sub-menu" hook="05"><a href="#about05">TEST</a></li> 
     <li id="sub-menu-06" class="sub-menu" hook="06"><a href="#about06">TEST</a></li> 
     <li id="sub-menu-07" class="sub-menu" hook="07"><a href="#about07">TEST</a></li> 
    </div> 

<div id="about01" class="about">CONTENT HERE 
</div> 

<div id="about02" class="about">CONTENT HERE 
</div> 

<div id="about03" class="about">CONTENT HERE 
</div> 

<div id="about04" class="about">CONTENT HERE 
</div> 

<div id="about05" class="about">CONTENT HERE 
</div> 

<div id="about06" class="about">CONTENT HERE 
</div> 

<div id="about07" class="about">CONTENT HERE 
</div> 

Comme je le dis, si #about01 est affiché, et l'utilisateur clique alors sur #sub-menu-01 à nouveau, la fenêtre défile vers le haut de cette div , comme c'est le comportement normal pour les hashs dans url. Est-ce un moyen d'empêcher le comportement par défaut et ne pas faire défiler vers le haut de cette div sur le clic?
En outre, j'essaie de comprendre s'il y a un moyen d'afficher #about01 sur le chargement de la page de www.website.com/about au lieu d'avoir à mettre www.website.com/about/#about01 etc?

Answer 1

problème est dans votre bloc jquery.each.

"return true" à l'intérieur du bloc jquery.each ne reviendra pas mais continuera pour les éléments suivants. En outre, cela ne retournera pas à partir de votre fonction determinerContenu, donc le code suivant pour le défilement sera également exécuté et déterminContent retournera toujours faux.

utiliser un indicateur, par ex.

var found = false; 
JQuery.each(function(){ 
    if(found) return; 
    //if your condition is true then found = true 
}) 

if(found) return true; 
//else continue the next line. 

Answer 2

$('a').click(function(event){ 
    event.preventDefault(); 
}); 

Le preventDefault() doit arrêter tous les événements par défaut qu'un élément a.

http://api.jquery.com/event.preventDefault/

Answer 3

Essayez ceci:

jQuery(window).on('hashchange', function(e){ 
    e.preventDefault(); 
    var hashFound = determineContent(); 
    if(hashFound) return false; 
}); 

La méthode preventDefault() de l'objet événement évitera, comme son nom l'indique, le comportement par défaut à exécuter sur cet événement. Puisque vous voudriez éviter le comportement normal quand le hachage change, ce code devrait faire.

Answer 4

$("#id").click(function(event) { 
    event.preventDefault(); 

    //do stuff 
}); 

http://api.jquery.com/event.preventDefault/