jQuery scrollTop переходит на неправильную привязку

Question

Я пытался решить проблему, но я не могу найти, что не так. Я просто хочу прокрутить до <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/

Справа вверху вы видите ссылки Executive Associates и т. Д.

Любая помощь будет оценена.

Спасибо

Answer 1

Проблема в том, что ваши разделы содержат только плавающие элементы, которые не очищены. Таким образом, у вас есть куча разделов, каждый с высотой 0px, и они расположены точно в одном и том же месте на странице.

Очистите все поплавки в разделах, чтобы исправить это. Вы можете использовать следующий CSS:

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

.pplSection:after{
    clear: both;
}

Answer 2

Это может помочь вам

сделать отображение inline-блока для разделов

section.pplSection {
    display: inline-block;
}

но выравнивание по центру изменится, вы должны разработать в соответствии с этим.