Scrollspy & Smooth Scroll Library – scrollspy.js

Category: Animation , Javascript , Menu & Navigation | May 26, 2018
Author: ederssouza
Views Total: 9,080 views
Official Page: Go to website
Last Update: May 26, 2018
License: MIT


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');



  • v2.0.2

You Might Be Interested In:

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

Leave a Reply