Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
r3plica Merge pull request #5 from henkkah/master
Add option for setting a duration for the animation
Latest commit a9351bc Oct 28, 2018


What is it?

Scrollspy is something that I needed to include in a project that does not use bootstrap. I still needed the scrollspy functionality that is bundled with bootstrap and after playing around with some alternatives, I found that the best solution was to create my own. The idea was to create a simple solution that did pretty much everything that bootstraps solution offers. So this is why I created this plugin.

For those that are not familiar with bootstraps scrollspy, basically this allows you to attach the plugin to a ul styled menu on a single page application. When you scroll down the page, the pages that you pass through would then mark the li children of your menu with an active class.




I have created a demo which you can find here:


unzip the contents to your desired location and include either library on your page.

How to use

It's really easy to use, simply initialise the script like this:


To pass options to the plugin, simply pass an object to the call like so:

    $("#nav").scrollspy({ offset: -25 });

Available options

Currently there are only a few options:


This allows you to define your own active class that gets added to the li element of the menu. default: 'active'


This tells the plugin whether it should animate the scroll when a link in your menu is click or not. default: false


This is the duration of the animation in milliseconds. default: 1000


This tells the plugin if there is any need to include an offset. default: 0


This function is called whenever the document scrolls into a new page.


In some cercumstances there will be a page that is not included in the menu. When scrollspy gets to this area the onExit function is called.

You can’t perform that action at this time.