Minimal Scrollspy With Smooth Scroll JavaScript Library – scrollmenu.js

Category: Javascript , Menu & Navigation | February 19, 2016
Author: denislins
Views Total: 3,810
Official Page: Go to website
Last Update: February 19, 2016
License: MIT

Preview:

Minimal Scrollspy With Smooth Scroll JavaScript Library – scrollmenu.js

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,
  
})

 

You Might Be Interested In:


One thought on “Minimal Scrollspy With Smooth Scroll JavaScript Library – scrollmenu.js

  1. Toralf

    Exactly what I was looking for! Simple and working – great stuff! Thanks 🙂

    Reply

Leave a Reply