
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.
- Publication date: 04.02.2018
- Source