jQuery的scrollTop转到错误的 anchor

Question

我一直在尝试解决问题，但找不到问题所在。我只想滚动到 <section>每当单击链接时，都会生成具有特定 ID 的元素。页面上有很多部分。但不知何故，每次单击任何链接时，页面都会滚动到第一部分，而不是正确的部分。

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

这里的问题是，您的部分仅包含未清除的 float 元素。因此，您有一堆部分，每个部分的高度均为 0px，并且它们位于页面上完全相同的位置。

Clear any floats在各部分中修复此问题。您可以使用以下 CSS:

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

.pplSection:after{
    clear: both;
}