javascript - 页面中的菜单滚动动画

Question

我有一个代码，当我点击菜单时，它会在滚动中找到带有动画的 anchor 标记，但是今天，我的代码突然不起作用，我没有触摸我的代码，发生了什么事？

这是我的 html 代码:

<ul class="nav nav-list flex-column mb-4 show-bg-active" id="sidebarList">
   <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="110" href="#who-we-are">Who We Are</a></li>
   <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="110" href="#history">History</a></li>
   <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="110" href="#mission-vision">Mission &amp; Vision</a></li>
   <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="110" href="#leadership">Leadership</a></li>
   <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="110" href="#partners">Partners</a></li>
</ul>

<section id="who-we-are" class="mb-4">WHO WE ARE</section>
<section id="history" class="mb-4">HISTORY</section>
<section id="mission-vision" class="mb-4">MISSION AND VISION</section>
<section id="leadership" class="mb-4">LEADERSHIP</section>
<section id="partners" class="mb-4">PARTNERS</section>

这是我的脚本:

 $(document).on('click', 'a[href^="#"]', function () {
    $('html, body').animate({
        scrollTop: $('section[id="' + this.hash.slice(1) + '"]').offset().top-100
    }, 800);
    return false;
});

Answer 1

这段代码工作正常。您需要设置 min-height。

$(document).on('click', 'a[href^="#"]', function () {
    $('html, body').animate({
        scrollTop: $('section[id="' + this.hash.slice(1) + '"]').offset().top-100
    }, 800);
    return false;
});

.mb-4{
  min-height:250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav nav-list flex-column mb-4 show-bg-active" id="sidebarList">
   <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="110" href="#who-we-are">Who We Are</a></li>
   <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="110" href="#history">History</a></li>
   <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="110" href="#mission-vision">Mission &amp; Vision</a></li>
   <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="110" href="#leadership">Leadership</a></li>
   <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="110" href="#partners">Partners</a></li>
</ul>

<section id="who-we-are" class="mb-4">WHO WE ARE</section>
<section id="history" class="mb-4">HISTORY</section>
<section id="mission-vision" class="mb-4">MISSION AND VISION</section>
<section id="leadership" class="mb-4">LEADERSHIP</section>
<section id="partners" class="mb-4">PARTNERS</section>