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

Question

警告：我是 JavaScript 的新手。

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

我正在使用 W3 中的这段代码让我的导航链接慢慢向下滚动页面到一个部分。

    $(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

在这里查看答案：

You appear to be using the slim build of jQuery 3.2.1, which doesn't include most of the library. Instead, you should be using the full version.

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

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

Smooth scrolling on BS4 fixed navbar with scrollspy

html

javascript

smooth-scrolling

twitter-bootstrap