Skip to content

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

License

Notifications You must be signed in to change notification settings

pcbulai/scrollIt.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Credit

Created by @ChrisPolis, blog

Feel free to use, share and fork.

Enjoy!

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 55.2%
  • CSS 44.8%