jQuery scrollTopが間違ったアンカーに移動する

Question

私は問題のトラブルシューティングを試みていますが、間違っている箇所は見つかりません。リンクをクリックするたびに特定のIDを持つ<section>要素にスクロールしたいだけです。このページには多くのセクションがあります。しかし何とかリンクがクリックされるたびに、ページは最初のセクションにスクロールされ、正しいセクションにスクロールされません。ここで

はHTMLである：ここでは

<ul class="menu fsMed lightFont horizontal" id="peopleMenu">   
    <li><a class="currentColor" href="#pageIntroHead">All</a></li> 
    <li><a class="currentColor" href="#principle_associates">Principle Associates</a></li> 
    <li><a class="currentColor" href="#executive_associates">Executive Associates</a></li> 
    <li><a class="currentColor" href="#senior_associates">Senior Associates</a></li> 
    <li><a class="currentColor" href="#associates">Associates</a></li> 
</ul> 

は、jQueryのコードです：

jQuery(document).ready(function($) { 
    jQuery('#peopleMenu li a').click(function(e) { 
     e.preventDefault(); 

    console.log(jQuery(this).attr('href')); 
     jQuery('html, body').animate({ 
     scrollTop: jQuery(jQuery.attr(this, 'href')).offset().top 
    }, 500); 
    return false; 
    }); 
}); 

私は問題はjQueryのコードではありませんが、何かがそれと矛盾すると思います。ここでは、問題を描いたURLは次のとおりです。 http://jla.ma-digital.net/team-structure/

右上にあなたがリンクエグゼクティブアソシエイツを参照してくださいなど

任意の助けいただければ幸いです。

ありがとうございました

Answer 1

ここでの問題は、セクションにはクリアされない浮遊要素のみが含まれています。したがって、それぞれのセクションの高さが0pxで、ページ上の同じ場所に配置されています。

Clear any floatsこれを修正するセクション内。あなたは、次のCSSを使用することができます。

.pplSection:before, 
.pplSection:after{ 
    content: ''; 
    display: table; 
} 

.pplSection:after{ 
    clear: both; 
} 

Answer 2

これは、セクションのためのあなた

が表示インラインブロックを作る助け

section.pplSection { 
    display: inline-block; 
} 

かもしれませんが、中央揃えが変更されます、あなたが応じて設計する必要がありますそれに。