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/

在右上角，您会看到Executive Associates等链接

任何帮助都会得到赞赏。

由于

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

但是中心对齐方式会发生变化，你必须根据它进行设计。

jQuery scrollTop进入错误的锚点

2 个答案: