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 px。但是，仅当我卸下引导传送带时，它才起作用。当我添加启动轮播时，它只会跳转，并且只会跳转到元素位置，而不是其上方的64 px。

编辑：我添加了

html{
    scroll-behavior: smooth;
}

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

Answer 1

Bootstrap使用没有动画的jQuery CDN的超薄版本。更改为缩小版本！

平滑滚动不适用于Bootstrap传送带

1 个答案: