Easy jQuery Plugin For Scrolling Web Page - ScrollIt.js

ScrollIt.js is an easy-to-use and lightweight jQuery plugin that allows you to scroll to a part of the web page using keyboard up and down keys or clicking the scroll navigation links. Good for creating long and vertically scrolling web pages.

How to use it:

1. Create the scroll navigation links using data-scroll-nav attributes

<nav>
<ul>
<li> <a class='active' data-scroll-nav='0'>Link 1</a> </li>
<li> <a data-scroll-nav='1'>Link 2</a> </li>
<li> <a data-scroll-nav='2'>Link 3</a> </li>
<li> <a data-scroll-nav='3'>Link 4</a> </li>
</ul>
</nav>

2. Create the content sections you want to scroll to

<section data-scroll-index='0'>
<div class='content'>
...
</div>
</section>

<section data-scroll-index='1'>
<div class='content'>
...
</div>
</section>

<section data-scroll-index='2'>
<div class='content'>
...
</div>
</section>

<section data-scroll-index='3'>
<div class='content'>
...
</div>
</section>

<section data-scroll-index='4'>
<div class='content'>
...
</div>
</section>

3. Include jQuery library and jQuery ScrollIt.js on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='../scrollIt.min.js' type='text/javascript'></script>

4. Call the plugin with options

<script>
$(function() { 
$.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
}); 
});
</script>

Change log:

v1.03 (2013-12-04)

• bugs fixed

---

This awesome jQuery plugin is developed by cmpolis. For more Advanced Usages, please check the demo page or visit the official website.