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

});

Change log:

2018-03-03

• Pass jQuery in reference to window, change to ES6 let and const

2018-02-14

• Remove global defaults to reduce namespace

2018-02-13

• Rewritten using different pattern for jQuery plugin and standard JS

2018-02-08

• Fixed for MS Edge.

2018-02-06

• Add override options and ability to cancel scroll from onLeave function

 

---

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