Demo and more information

About

ScrollIt.js(scroll•it•dot•js) makes it easy to make long, vertically scrolling pages. This is why it rocks:

• Easy to implement: One JS call, just put data- attributes on the DOM
• Lightweight: ~1kb minified
• Active Class: Your navigation is updated automatically
• Configurable: Set the animation easing, duration, callbacks and more
• Keyboard Navigation: Press the up and down keys to move...

Usage

1. Include jQuery and scrollIt.js

<scriptsrc="jquery-1.10.2.min.js" type="text/javascript"></script><scriptsrc="scrollIt.js" type="text/javascript"></script>

2. Put a data-scroll-index attribute on each section

<divdata-scroll-index="0">..content..</div><divdata-scroll-index="1">...</div><divdata-scroll-index="2">...</div>

3. Put corresponding data-scroll-nav attributes on each nav

<adata-scroll-nav="0">About</a><adata-scroll-nav="1">Usage</a><adata-scroll-nav="2">Options</a>

4. For links to sections, put on a data-scroll-goto attribute

<adata-scroll-goto="0">Back to top</a>

5. Call scrollIt()

$(function(){$.scrollIt();});

Options

To customize scrollIt.js, simply pass in an options object: (defaults shown)

$.scrollIt({upKey: 38,// key code to navigate to the next sectiondownKey: 40,// key code to navigate to the previous sectioneasing: 'linear',// the easing function for animationscrollTime: 600,// how long (in ms) the animation takesactiveClass: 'active',// class given to the active nav elementonPageChange: null,// function(pageIndex) that is called when page is changedtopOffset: 0// offste (in px) for fixed top navigation});

Credit

Created by @ChrisPolis, blog

Feel free to use, share and fork.

Enjoy!