A pure javascript menu for single page applications with animated scroll
Switch branches/tags
Nothing to show
Clone or download
Latest commit d8ceb2b Jul 4, 2016
Failed to load latest commit information.
dist Add minified version Feb 17, 2016
src Add minified version Feb 17, 2016
.gitignore Add gitignore Feb 17, 2016
LICENSE Initial commit Feb 16, 2016
README.md Udpdate file download link Feb 17, 2016
bower.json Fixed main attribute May 25, 2016



A pure javascript menu for single page applications with animated scroll and a really small footprint (1kb gzipped)

Getting started


The preferred installation method is via bower:

$ bower install scrollmenu

But you can also copy the file directly to your application.

Basic usage

Add the dependency to your page:

<script type="text/javascript" src="scrollmenu.js"></script>

After, initialize the menu passing a selector that will match your links in the menu:

new ScrollMenu('.menu a')

And you're set.


A demo page can be found here.


new ScrollMenu(selectors[, options])


An array of selectors that will match a elements. Can be a simple string for simplicity.


An object that will override the library's default options. The default options are presented below.

  // animation duration in milliseconds
  duration: 400,
  // padding to recognize a section as active when scrolling
  activeOffset: 40,
  // padding when scrolling to a container via menu click
  scrollOffset: 10,
  // easing function, the default is 'easeInOutCubic'
  // you can see more in here: http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js
  easingFunction: function(t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t + b;
    return c/2*((t-=2)*t*t + 2) + b;


Tested in Chrome, Firefox, Safari, IE11 and Edge. Please open an issue if you find some sort of bug.

Also, please note that we probably won't support IE9-, mainly because they lack support for the history API.