JS Scrolling doesn't seem to work on my websit

Question

So I am trying to use the smooth scrolling animation used in this template:

https://blackrockdigital.github.io/startbootstrap-scrolling-nav/

After adding the js files to my directory, including the basic JQuery files, I've seen the custom .js file that adds the scrolling uses the .class parameter in an anchor tag to detect if clicking it should trigger the smoothscrolling. So I added those to my anchor tags.

Below is the relevant code.

I will include a live preview too.

index.html file

<!-- Navigation section -->
<section class="nav" id="nav">
    <div class="container">
        <div class="row" style="width: 100%; text-align: center;">
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <a class="js-scroll-trigger btn btn-lg btn-nav" href="#about">About me</a>
            </div>

            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <a class="js-scroll-trigger btn btn-lg btn-nav" href="#work">My work</a>
            </div>

            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <a class="js-scroll-trigger btn btn-lg btn-nav" href="#contact">Contact</a>
            </div>
        </div>
    </div>  
</section>

Script imports in index.html

<!-- Import js -->
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>

Scrolling-nav.js

(function($) {
  "use strict"; // Start of use strict

  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
  });

})(jQuery); // End of use strict

I have nearly no experience with JQuery / JS, so it's hard for me to understand where it might be going wrong.

Here is a live preview of the website with above code in it:

Live preview

Full code:

Github link

If there's any information missing, let me know.

Answer 1

Add this code in you jquery

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

Answer 2

jQuery is missing, and you're using jQuery in your click event...