Highly Configurable jQuery Smooth Page Scroller Plugin

scroller.js is a simple yet highly customizable jQuery page scroller plugn which enable the anchor links to scroll smoothly through sectioned content within the document. Supports both vertical and horizontal page scrolling. Perfect for creating a fullscreen one page scrolling web template for your single page web application.

More features:

• Easing effects (requires jQuery UI).
• HTML5 pushState() method is supported.
• Scroll to top button.

How to use it:

1. Include the jQuery scroller.js plugin after jQuery library like this:

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="dist/jquery.scroller.min.js"></script>

2. Include jQuery UI library for additional easing effects(OPTIONAL).

<script src="jquery-ui.min.js"></script>

3. Add the 'data-scroll' attribute to your site's anchor links pointing to the content sections within the document.

<li><a href="#header" data-scroll>Header</a></li>
<li><a href="#section-1" data-scroll>Section I.</a></li>
<li><a href="#section-2" data-scroll>Section II.</a></li>
<li><a href="#section-3" data-scroll>Section III.</a></li>
<li><a href="#footer" data-scroll>Footer</a></li>

4. Initialize the plugin and you're done.

$('a[data-scroll]').scroller();

5. Full plugin options.

$('a[data-scroll]').scroller({

  // max viewport length time delay calculation limit
  lengthDelayLimit: 2.5,

  // if true use pushState() method for anchor URL injection. 
  // if false use replaceState() method
  pushHistory: false,

  // turns on/off viewport length time delay calculation
  lengthDelay: true,

  // push anchor ID to URL
  pushState: false,

  // enable/disable top button
  topButton: false,

  // vertical or horizontal scrolling
  vertical: false,

  // scroller element
  element: 'html, body',

  // callback
  callback: null,

  // scroll animation duration
  duration: 750,

  // easing effect
  easing: null,

  // offset
  offset: 0,

  // scroll animation delay
  delay: 0,

  // options for the scroll to to button
  button: {
    id: '#scroller-top-button',
    disableLayout: false,
    bottom: 10,
    right: 10,
    element: 'body',
    content: 'TOP',
    class: null,
    hide: 0,
    fade : 0
  }
  
});

5. Events.

$('a[data-scroll]').scroller()
.on ('scroller:beforeScroll', functon(){
  // fires before scroll 
});

.on ('scroller:afterScroll', functon(){
  // fires after scroll 
});

---

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