Skip to content
A jQuery plugin that makes it easy to create paginated, feature vertically scrolling pages.
JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo v1 - working plugin and demo Jul 9, 2013
.gitignore Added .DS_Store to .gitignore Aug 19, 2013
AUTHORS.txt Added Frank S as author. Oct 28, 2013
LICENSE.txt
README.md updated README, minified js for topOffset option Aug 18, 2013
ScrollIt.jquery.json
bower.json
scrollIt.js ... Apr 2, 2014
scrollIt.min.js updated minified file Apr 2, 2014

README.md

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>
  1. 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>
  1. 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>
  1. For links to sections, put on a data-scroll-goto attribute
<a data-scroll-goto="0">Back to top</a>
  1. 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 can’t perform that action at this time.