Lightweight One Page Scroll Plugin For jQuery - snapScroll.js

snapScroll.js is a lightweight yet configurable and user-friendly jQuery one page scroll plugin designed for modern single page web app.

Features:

• Works on elements of any height or width.
• Auto snaps to your chosen elements.
• Navigation between elements with arrow keys.
• Easing animations supported as well.

How to use it:

1. Add the data-snap-point attribute to content sections you want to scroll through.

<main>
  <div data-snap-point>
    Section 1
  </div>
  <div data-snap-point>
    Section 2
  </div>
  <div data-snap-point>
    Section 3
  </div>
  <div data-snap-point>
    Section 4
  </div>
  <div data-snap-point>
    Section 5
  </div>
</main>

2. Insert the minified version of the jQuery snapScroll.js plugin after jQuery library.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" 
        crossorigin="anonymous">
</script>
<script src="jquery.snapScroll.min.js"></script>

3. (OPTIONAL) Load an easing library of your choice (e.g. jQuery UI or jQuery easing plugin) for extra easing functions.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" 
        crossorigin="anonymous">
</script>
<script src="jquery.snapScroll.min.js"></script>

4. Initialize the jQuery snapScroll.js plugin with default settings.

SnapScroll({
  // options here
});

5. Full plugin options with default values.

SnapScroll({
  // enable arrow keys
  arrowKeys: false,
  // duration in milliseconds
  duration: 600,
  // easing function
  easing: 'swing',
  // snap the content section to this element
  element: 'html',
  // determine if the snap points should be scrolled to in their markup order, or if a separate order has been specified.
  ordered: true,
  // shows or hides the scrollbar
  scrollBar: true
  
});

6. Callback functions available.

SnapScroll({
   onLeave: function(currentPoint, nextPoint) {},
  onArrive: function(prevPoint, currentPoint) {}
});

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