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

File Size: 11.9 KB
Views Total: 5545
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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>

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

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

<script src="" 
<script src="jq.nav-scroll-spy.js"></script>

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


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

  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=""></script>
  easing: 'easeInOutBack' // default 'swing'

6. Default selectors.

  navItems: '.nav-item',
  scrollContainer: 'html,body',
  spyItems: '.spy-item'

7. Apply your own CSS styles to the active menu item.{
  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.