jquery: hashchange, zapobiega przeskakiwaniu do hash

Question

Mam funkcję wymiany hash, aby pokazać/ukryć różne sekcje strony o stronie bez 7 oddzielnych stron. To wszystko działa dobrze, świetna rzecz, jest tylko jedna mała rzecz, która mnie niepokoi, kiedy odpowiednia zawartość jest wyświetlana na ekranie, np .: #about01 jeśli klikniesz ponownie przycisk menu przeglądarka przeskoczy do góry tego elementu div, który ja nie chcę się wydarzyć.
Oto mój 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> 

Jak mówię, jeśli #about01 jest pokazane, a następnie użytkownik kliknie #sub-menu-01 kolejny przewija okno w dół do góry tej div , jak to normalne zachowanie dla skrótów w url. Czy jest sposób, aby zapobiec domyślnemu zachowaniu i nie przewinąć do góry tego elementu div w kliknięciu?
Próbuję również dowiedzieć się, czy istnieje sposób, aby pokazać #about01 na stronie ładowania www.website.com/about zamiast konieczności wstawiania www.website.com/about/#about01 itp?

Answer 1

Problem jest w bloku jQuery.each.

"return true" wewnątrz jquery.each blok nie powróci, ale będzie kontynuował następne pozycje. Nie spowoduje to również powrotu z funkcji determineContent, więc następny kod do przewijania zostanie również wykonany i określona wartość zawsze zwróci false.

użyj flagi np.

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

Należy zatrzymać wszystkie domyślne zdarzenia, które ma element.

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

Answer 3

Spróbuj tego:

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

preventDefault() metoda obiektu zdarzenia będzie uniknąć, jak sama nazwa pokazuje, domyślne zachowanie należy wykonać na tej imprezie. Ponieważ chcesz uniknąć normalnego zachowania podczas zmiany hasza, ten kod powinien zrobić.

Answer 4

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

    //do stuff 
}); 

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