How to Build a Custom JavaScript Scrollspy Navigation | Simple Scrollspy

Simple Scrollspy, a simple and lightweight JavaScript library that applies Scrollspy functionality to a one-page scrolling website.

Simple scrollspy is a library without jQuery and no dependencies. It is used to create a scrolling effect for your list, table of contents, etc.

How to make use of it:

Install the library.

# Yarn
$ yarn add simple-scrollspy

# NPM
$ npm install simple-scrollspy --save

Download the zip after which insert the JavaScript file ‘simple-scrollspy.js’ into the doc.

<script src="simple-scrollspy.js"></script>

Create a regular navigation menu and specify the target web page sections utilizing the ‘data-scrollspy’ attribute as follows:

<section class="scrollspy" id="home">
  <nav class="navigation">
    <ul id="menu" class="menu">
      <li class="menu__item">
          <a href="#hero" class="active" data-scrollspy="#hero">Hero</a>
      </li>
      <li class="menu__item">
          <a href="#section_1" data-scrollspy="#section_1">Section 1</a>
      </li>
      <li class="menu__item">
          <a href="#section_2" data-scrollspy="#section_2">Section 2</a>
      </li>
      <li class="menu__item">
          <a href="#section_3" data-scrollspy="#section_3">Section 3</a>
      </li>
      <li class="menu__item">
          <a href="#section_4" data-scrollspy="#section_4">Section 4</a>
      </li>
    </ul>
  </nav>
</section>

Active the scrollspy plugin with default choices.

window.onload = function () {
  scrollSpy('#menu')
}

All attainable choices to customise the scrollspy functionality.

window.onload = function () {
  scrollSpy('#menu', {
    offset: 0, // in pixels
    menuActiveTarget: 'li > a',
    sectionClass: '.scrollspy',
    activeClass: 'active',
    scrollContainer: ''
  })
}

Customize the types when the menu item is energetic.

.menu__item a.active {
  color: #ff7600;
  font-weight: bolder;
}

scrollspy smooth scroll, Simple ScrollSpy Plugin/Github

See Demo And Download

Official Website(kimyvgy): Click Here

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