jQuery scrollTop geht zum falschen Anker

Question

Ich habe versucht, das Problem zu beheben, aber ich kann nicht finden, was falsch ist. Ich möchte einfach zu einem <section> Element mit einer bestimmten ID scrollen, wenn ein Link angeklickt wird. Es gibt viele Abschnitte auf der Seite. Aber jedes Mal, wenn ein Link angeklickt wird, scrollt die Seite zum ersten Abschnitt und nicht zum richtigen. Hier

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

Hier ist der JQuery-Code:

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

Ich denke, das Problem ist nicht mit JQuery-Code, sondern etwas Konflikte mit ihm. Hier ist die URL das Problem darstellt: http://jla.ma-digital.net/team-structure/

Oben rechts Sie die Links Vorstand Associates etc. siehe

jede Hilfe dankbar sein würde.

Dank

Answer 1

Das Problem hier ist, Ihre Abschnitte nur fließende Elemente enthält, die nicht gelöscht werden. Sie haben also eine Reihe von Abschnitten mit jeweils 0 Pixeln Höhe und sie sind genau an der gleichen Stelle auf der Seite positioniert.

Clear any floats innerhalb der Abschnitte, um dies zu beheben. Sie könnten die folgenden CSS:

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

.pplSection:after{ 
    clear: both; 
} 

Answer 2

Diese Sie inline-block

Make-Display für die Abschnitte

section.pplSection { 
    display: inline-block; 
} 

könnte helfen, aber die Ausrichtung Zentrum wird sich ändern, müssen Sie entsprechend gestalten dazu.