jQuery Plugin for a ScrollSpy Navigation | scrollspy.js

jquery-scrollspy is an easy but fully customizable scroll spy navigation plugin that highlights active links to navigate your site as the user scrolls to the corresponding section.

scrollspy jquery example, scrollspy using jquery, scrollspy javascript, scrollspy javascript example, smooth scrollspy, scrollspy css, scrollspy library

How to make use of it:

1. Create website navigation that accommodates anchor links pointing to sections of your web page.

<!-- Site Nav -->
<div class="header">
  <nav class="scroll-spy">
      <li><a href="#red">Red</a></li>
      <li><a href="#green" class="not">Green (Ignore)</a></li>
      <li><a href="#blue">Blue</a></li>
      <li><a href="#yellow">Yellow</a></li>
      <li><a href="#pink">Pink</a></li>

<!-- Page Sections -->
<div id="red">RED like a fire</div>
<div id="green">GREEN like the forest</div>
<div id="blue">BLUE like the ocean</div>
<div id="yellow">YELLOW like the sun</div>
<div id="pink">PINK like a flower</div>

2. Make the positioning navigation sticky and elegance the energetic links as follows:

.header {
  position: sticky;
  top: 0;

.header nav ul {
  /* custom list styles */

.header nav ul li a.active {
  background-color: #222;
  color: white;

3. Load the jquery.scrollspy.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.scrollspy.js"></script>

4. Initialize the plugin, decide the offset component, and specify the menu objects which need to be ignored.

  offsetElement: '.header',
  ignoreAnchors: [ '.not' ],

5. Config the smooth scroll behavior.

  offset: 0,
  scrollDuration: 0,
  scrollEasing: 'swing',

6. Customize the active class.

  activeClass: 'enabled'

7. Define the anchor selectors in a JS array.

  anchors: ['a[href*=\\#]']

Easy Scrollspy Navigation, jquery-scrollspy Plugin/Github

See Demo And Download

Official Website(media4motion): Click Here

This superior jQuery/javascript plugin is developed by media4motion. For extra Advanced Usages, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from https://squircley.app wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…