Scrollspy & Smooth Scroll Library – scrollspy.js

Preview:

Description:

A lightweight pure JavaScript scrollspy library that enables the navigation links to smoothly scroll between page sections with scrollspy support.

How to use it:

Download and include the scrollspy.js library at the bottom of the webpage.

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

Create the navigation and its corresponding sectioned contents.

<nav class="navbar">
  <ul>
    <li><a class="active" href="#home" title="Home">Home</a></li>
    <li><a href="#portfolio" title="Portfolio">Portfolio</a></li>
    <li><a href="#about" title="About">About</a></li>
    <li><a href="#contact" title="Contact">Contact</a></li>
  </ul>
</nav>
<section id="home" class="page">
  <div class="container">
    <h2>Home</h2>
  </div>
</section>
<section id="portfolio" class="page">
  <div class="container">
    <h2>Portfolio</h2>
  </div>
</section>
<section id="about" class="page">
  <div class="container">
    <h2>About</h2>
  </div>
</section>
<section id="contact" class="page">
  <div class="container">
    <h2>Contact</h2>
  </div>
</section>

Initialize the scrollspy library. That’s it.

var menu = document.querySelector('.navbar');
scrollSpy(menu);

Style the active menu item in the CSS:

.navbar a.active {
  color: #fff;
  line-height: 50px;
  text-decoration: none;
}

Override the default scroll speed.

scrollSpy(menu,2000);

Apply an easing effect to the smooth scroll.

// 'easeOutSine', 'easeInOutSine' or 'easeInOutQuint', default value easeInOutQuint
scrollSpy(menu, 2000, 'easeInOutQuint');

Changelog:

09/26/2022

• v3.0.3

07/01/2021

• v2.2.0

05/26/2018

• v2.0.2