jquery - 平滑滚动不适用于 Bootstrap 轮播

Question

代码只会跳转到 href 哈希，而不是执行任何 jquery。

我试过很多不同的平滑滚动方法，但似乎都行不通

JQuery:

$(document).ready(function() {
  $('a[href^="#"]').click(function() {
      var target = $(this.hash);
      if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
      if (target.length == 0) target = $('html');
      $('html, body').animate({ scrollTop: target.offset().top-64 }, 1000);
      return false;
  });
});

HTML:

<section id="page-content">
    <div id="welcome">
        <div id="springfeild-carousel" class="carousel slide container" data-ride="carousel" data-interval="6000">
            <ol class="carousel-indicators">
                <li data-target="#springfeild-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#springfeild-carousel" data-slide-to="1"></li>
                <li data-target="#springfeild-carousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="Banner1.png" alt="First slide">
              </div>
              <div class="carousel-item">
                  <img class="d-block w-100" src="Banner2.png" alt="Second slide">
              </div>
              <div class="carousel-item">
                  <img class="d-block w-100" src="Banner3.png" alt="Third slide">
              </div>
          </div>
          <a class="carousel-control-prev" href="#springfeild-carousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#springfeild-carousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <div id="welcome-text">
        <h2 class="green-shadow">Welcome to...</h2>
    </div>
    <div id="welcome-sf">
        <h2 class="green-shadow">Springfield Industries</h2>
    </div>
</div>
<div id="start-button">
    <h2>What can we do?</h2>
    <a href="#chemical-reaction">
        <img src="Target Shark.jpg" alt="Explore" id="im"></img>
    </a>
</div>
<div id="chemical-reaction">
    <div id="chemical-reaction-text">
        <h3>Chemical Reaction</h3>
        <p>Stuff about chemical rections</p>
    </div>
    <div id="chemical-reaction-picture">
        <img src="Stud Shark.jpg" alt="Springfield Industries Chemical Reaction">
    </div>
</div>

我正在尝试平滑滚动到元素上方 64 像素处。但是，它仅在我删除 Bootstrap 轮播时才有效。当我添加 bootstrap carousel 时，它只会跳转并且只会跳转到元素位置，而不是它上面的 64 px。

编辑:我添加了

html{
    scroll-behavior: smooth;
}

到我的 css，现在它将平滑滚动，但不会滚动到元素上方的 64px。我仍然不会执行我的 jquery

Answer 1

Bootstrap 使用没有动画的精简版 jQuery CDN。改成缩小版吧!