Easy Scrolling Pages With ScrollIt.js

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…

ScrollIt.js

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

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

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

 

View the source of this page for an example


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *