Navigation ScrollSpy & Smooth Scroll Plugin - nav-scroll-spy.js

A small yet useful jQuery scrollspy and smooth scroll plugin for site navigation that allows you to highlight the active item in the menu and smoothly scroll through the webpage.

Features:

• Highlights menu items to indicate the page section you are currently looking at. 
• Smoothly scroll the page to sections as you click the menu items.

How to use it:

1. Create the site navigation and page sections as follows:

<ul class="nav-group">
  <li class="nav-item active">Item 1</li>
  <li class="nav-item">Item 2</li>
  <li class="nav-item">Item 3</li>
  ...
</ul>

<div class="container">
  <div class="spy-item">Section 1</div>
  <div class="spy-item">Section 2</div>
  <div class="spy-item">Section 3</div>
  ...
</ul>

2. Load the main JavaScript file jq.nav-scroll-spy.js after the latest jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="jq.nav-scroll-spy.js"></script>

3. Call the function and the plugin will do the rest.

$(document).jqNavScrollSpy();

4. Change the default duration of the smooth scroll animation.

$(document).jqNavScrollSpy({
  speed: 550 // in ms
});

5. Override the default easing effect. For more easing functions, load jQuery easing plugin or jQuery UI library in your document.

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

$(document).jqNavScrollSpy({
  easing: 'easeInOutBack' // default 'swing'
});

6. Default selectors.

$(document).jqNavScrollSpy({
  navItems: '.nav-item',
  scrollContainer: 'html,body',
  spyItems: '.spy-item'
});

7. Apply your own CSS styles to the active menu item.

.nav-item.active{
  background-color: #222;
  color: #fff;
}

---

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