jquery: hashchange, impedisci di saltare all'hash

Question

Ho una funzione di hashchange impostata per mostrare/nascondere diverse sezioni di una pagina relativa senza avere 7 pagine separate. Funziona tutto bene, in effetti, c'è solo una piccola cosa che mi infastidisce, quando il contenuto pertinente viene mostrato sullo schermo, ad esempio: #about01 se si fa clic di nuovo sul pulsante menu, il browser salta in cima a questo div, che io non voglio accadere.
Ecco la mia 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> 

Come ho detto, se #about01 è mostrata, e l'utente fa clic poi sul #sub-menu-01 di nuovo, la finestra scorre fino alla parte superiore di questo div , come è il comportamento normale per hash in url. È un modo per prevenire il comportamento predefinito e non scorrere fino all'inizio di questo div sul clic?
Inoltre, sto cercando di capire se c'è un modo per mostrare #about01 sul caricamento della pagina di www.website.com/about invece di dover inserire www.website.com/about/#about01 ecc.?

Answer 1

problema è nel tuo blocco jquery.each.

"return true" all'interno del blocco jquery.each non verrà restituito ma continuerà per gli elementi successivi. Inoltre, questo non verrà restituito dalla funzione determinContent, quindi verrà eseguito anche il codice successivo per lo scorrimento e determinerà sempre che Contento restituisca false.

utilizzare una bandiera, ad es.

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(); 
}); 

Il preventDefault() dovrebbero smettere di eventi di default che un elemento ha.

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

Answer 3

Prova questo:

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

Il preventDefault() metodo dell'oggetto evento eviterà, come indica il nome, il comportamento predefinito da eseguire su tale evento. Dal momento che desideri evitare il comportamento normale quando l'hash cambia, il codice dovrebbe funzionare.

Answer 4

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

    //do stuff 
}); 

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