ScrollIt.js(scroll•it•dot•js) makes it easy to make scrolling pages like this one or add scrolling functionality to existing pages.
Why Scrollit.js:
- 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…
DOWNLOAD
Usage
1) Include jQuery and scrollIt.js
<script src="jquery-1.10.2.min.js" type="text/javascript"></script> <script src="scrollIt.js" type="text/javascript"></script>
2) Put a data-scroll-index attribute on each section
<div data-scroll-index="0">..content..</div> <div data-scroll-index="1">...</div> <div data-scroll-index="2">...</div>
3) Put corresponding data-scroll-nav attributes on each nav element
<a data-scroll-nav="0">About</a> <a data-scroll-nav="1">Usage</a> <a data-scroll-nav="2">Options</a>
4) For links to sections, put on a data-scroll-goto attribute
<a data-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 section
downKey: 40, // key code to navigate to the previous section
easing: 'linear', // the easing function for animation
scrollTime: 600, // how long (in ms) the animation takes
activeClass: 'active', // class given to the active nav element
onPageChange: null, // function(pageIndex) that is called when page is changed
});