Minimal Scrollspy With Smooth Scroll JavaScript Library – scrollmenu.js

Preview:

Description:

scrollmenu.js is a simple, flexible JavaScript library used for adding an active class to the nav items when you scroll past their sections. Clicking on a link in the nav will smoothly scroll to the corresponding section.

How to use it:

Add the scrollmenu.js JavaScript library into your html document when needed.

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

Active the scrollspy functionality on your existing site navigation.

new ScrollMenu('.menu a')

Style the active nav items.

.menu a.active {
  font-weight: bold;
}

Possible options.

new ScrollMenu('.menu a',{
  // smooth scroll duration
  duration: 400,
  // padding to recognize a section as active when scrolling
  activeOffset: 40,
  // padding when scrolling to a container via menu click
  scrollOffset: 10,
  
})