Lightweight One Page Scroll Plugin For jQuery - snapScroll.js

File Size: 17.7 KB
Views Total: 3227
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.