A repository of over 1000 quality jQuery plugins

jQuery ScrollIt JS

ScrollIt JS is a jQuery Scrolling plugin.

Created by Cmpolis

A jQuery plugin that makes it easy to create paginated, feature vertically scrolling pages.

Not what you're looking for? Click here to view more Scrolling jQuery plugins

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

    <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

    <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
  topOffset: 0           // offste (in px) for fixed top navigation
});

Credit

Created by @ChrisPolis, blog

Feel free to use, share and fork.

Enjoy!



You might also like these other Scrolling jQuery Plugins

  • Scrollbar

    A jQuery plugin for custom scrollbars.

  • Clusterize.js

    Tiny plugin to display large data sets easily

  • smartscroll

    jQuery plugin for scrolljacking and auto-hashing, supports touch events