Scrollspy & Smooth Scroll Library – scrollspy.js

Category: Animation , Javascript , Menu & Navigation | October 14, 2023
Views Total:426 views
Official Page:Go to website
Last Update:October 14, 2023


Scrollspy & Smooth Scroll Library – scrollspy.js


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">
    <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>
<section id="home" class="page">
  <div class="container">
<section id="portfolio" class="page">
  <div class="container">
<section id="about" class="page">
  <div class="container">
<section id="contact" class="page">
  <div class="container">

Initialize the scrollspy library. That’s it.

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

Style the active menu item in the CSS:

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

Override the default scroll speed.


Apply an easing effect to the smooth scroll.

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



  • v3.0.8: Bugfixes

You Might Be Interested In:

One thought on “Scrollspy & Smooth Scroll Library – scrollspy.js

Leave a Reply