jquery：hashchange、ハッシュへのジャンプを防止する

Question

私は約7ページの別ページを持たずに約ページの異なるセクションを表示/非表示に設定するhashchange機能を持っています。これはすべてうまく動作します。ちょっとしたことがあります。関連するコンテンツが画面に表示されているときに気になる小さなものが1つあります。たとえば、#about01メニューボタンを再度クリックするとブラウザがこのdivの先頭にジャンプします起こりたくありません。
は、ここに私の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：

#about01が示されており、ユーザーは、ウィンドウのスクロールこのdiv要素の最上部まで、再び #sub-menu-01をクリックした場合、私が言うのように

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

、これは、urlのハッシュの通常の動作と同様です。デフォルトの振る舞いを防ぎ、クリックでこのdivの上にスクロールしない方法ですか？
また、などに入れないで、www.website.com/aboutのページの負荷に#about01を表示する方法があるかどうかを確認しようとしていますか？

Answer 1

問題は、あなたのjquery.eachブロックです。

jquery.eachブロック内の "return true"は返されませんが、次の項目については続行されます。 また、これはdecideContent関数から戻ってこないので、scrollの次のコードも実行され、decideContentは常にfalseを返します。

フラグを使用します。

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

preventDefault()は、要素が持つデフォルトイベントをすべて停止する必要があります。

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

Answer 3

このお試しください：イベントオブジェクトのpreventDefault()方法は、そのイベントで実行されるように、その名前が示すように、デフォルトの動作を回避します

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

を。ハッシュが変更されたときの通常の動作を回避したいので、そのコードで行う必要があります。

Answer 4

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

    //do stuff 
}); 

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