使用scrollspy在BS4固定导航栏上平滑滚动

Question

警告：我是JavaScript新手。

我正在为一个家庭成员开发一个站点，但偶然发现了一个问题。 我正在为该站点使用Bootstrap 4，因此使用了它们的导航栏框架。 导航栏固定在顶部，并使用ScrollSpy突出显示活动部分。

我正在使用W3中的这段代码来使我的Nav链接缓慢向下滚动页面至某个部分。

    $(document).ready(function(){
  // Add smooth scrolling to all links
  $("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
  });
});

没运气。 我的导航链接不再起作用，并且出现这些讨厌的控制台错误

master.js:15 Uncaught TypeError: $(...).animate is not a function
    at HTMLAnchorElement.<anonymous> (master.js:15)
    at HTMLAnchorElement.dispatch (jquery-3.2.1.slim.min.js:3)
    at HTMLAnchorElement.q.handle (jquery-3.2.1.slim.min.js:3)

我知道您在想什么，master.js是在jQuery之前提供的。 不！

我将不胜感激。

Answer 1

在这里查看答案： jquery：$（）。animate（）不是函数

您似乎正在使用jQuery 3.2.1的苗条版本，该版本不包含大多数库。 相反，您应该使用完整版本。

https://code.jquery.com/jquery-3.2.1.js