Bootstrap 4滚动动画不起作用

Question

我正在尝试使用 bootstrap 4.3.1 和 jquery 3.3.1 scrollspy 实现平滑的滚动动画，但我无法让它工作。 滚动间谍似乎可以工作，但由于某种原因没有动画。 在旧版本的 bootstrap 和 jquery 中，此代码似乎可以正常工作。有什么帮助吗？

jsfiddle demo

$('Html, body').scrollspy({
  target: ".navbar",
  offset: 0
});

// Add smooth scrolling on all links inside the navbar
$("myNavbar a").on('click', function(event) {

  // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {

    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function() {

      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });

  } // End if

});

<body style="position:relative">

  <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="#myNavbar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#section1">section1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">section2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">section3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section4">section4</a>
        </li>
      </ul>
    </div>
  </nav>

  <div id=section1 class="container-fluid">
    <h2>section1</h2>
    <p>IIam a sefl teaching web developer Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, facilis, iure</p>
  </div>
  <div id=section2 class="container-fluid">
    <h2>section2</h2>
    <p>Iam a sefl teaching web developer Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, facilis, iure</p>
  </div>
  <div id=section3 class="container-fluid">
    <h2>section3</h2>
    <p>Iam a sefl teaching web developer Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, facilis, iure</p>
  </div>
  <div id=section4 class="container-fluid">
    <h2>section4</h2>
    <p>Iam a sefl teaching web developer Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, facilis, iure</p>
  </div>

Answer 1

我使用的是 jquery 的最小版本，它没有动画功能。我刚刚使用了非最低版本，它工作正常。