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

Question

WARNING: I'm new to JavaScript.

I am developing a site for a family member and I've stumbled upon a problem. I am using Bootstrap 4 for the site, and therefor their navbar framework. The navbar is fixed to the top, and uses ScrollSpy to highlight the active section.

I am using this code from W3 to have my Nav links slowly scroll down the page to a section.

    $(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
  });
});

No luck. My nav links nolonger work, and I get these nasty console errors

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)

I know what you're thinking, master.js is sourced before jQuery. Nope!

I would appreciate any help I can get on this.

Answer 1

See the answer here: jquery : $().animate() is not a function

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