Smooth Scroll Plugin For Bootstrap Scrollspy Component - smoothScroll.js

A tiny jQuery plugin that adds the Smooth Scroll functionality to the native Bootstrap 4 scrollspy component. Based on jQuery's animate() method.

With this plugin, your visitors are able to smoothly scroll the webpage to certain positions within the document by clicking the links in the navigation.

How to use it:

1. Load the minified version of the jQuery smoothScroll.js plugin in the Bootstrap 4 project.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="./dist/jquery.smoothScroll.min.js"></script>

2. Call the function on the Bootstrap 4 scrollspy component and done.

<nav id="navbar-example" class="navbar">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" class="scrollspy-example"> 
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
</div>

$(function() {
  $('.scrollspy-example').smoothScroll();
});

3. Customize the duration of the animation. Default: 800ms.

$(function() {
  $('.scrollspy-example').smoothScroll({
    duration: 1000
  });
});

4. Enable/disable the URL hash. Default: false.

$(function() {
  $('.scrollspy-example').smoothScroll({
    addHash: true
  });
});

---

This awesome jQuery plugin is developed by gar-cad. For more Advanced Usages, please check the demo page or visit the official website.