jQuery scrollTop 转到错误的锚点答案

【问题标题】：jQuery scrollTop goes to wrong anchorjQuery scrollTop 转到错误的锚点
【发布时间】：2016-07-26 11:25:02
【问题描述】：

我一直在尝试解决问题，但找不到问题所在。每当单击链接时，我只想滚动到具有特定 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/

在右上角，您可以看到 Executive Associates 等链接。

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： jquery jquery-animate scrolltop

【解决方案1】：

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

Clear any floats 在部分中解决此问题。您可以使用以下 CSS：

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

.pplSection:after{
    clear: both;
}

【讨论】：

你是救生员乔治 :)
很高兴我能帮助 Ahmar。

【解决方案2】：

这可能对你有帮助

为这些部分制作显示内联块

section.pplSection {
    display: inline-block;
}

但是中心对齐会改变，你必须按照那个来设计。

【讨论】：