jQuery Plugin For Animated Vertical Scroll Snapping - Scrollsnap

Scrollsnap is a simple and useful jQuery plugin for providing a snapping behaviour to enhance the scrolling experience. The plugin defines 'anchor points' onto which the window snaps when you scroll through a web page or parts of it.

How to use it:

1. Include jQuery library and other necessary javascript files on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="src/jquery.event.special.js"></script>
<script src="src/jquery.easing.min.js"></script>
<script src="src/jquery.scrollsnap.js"></script>

2. Markup

<h3 class="snap">Headline 1</h3>
.
..
...
<h3 class="snap">Headline 2</h3>
.
..
...
<h3 class="snap">Headline 3</h3>
.
..
...

3. Call the plugin with options

<script type="text/javascript">
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.snap', // the CSS selector of snapping elements
proximity: 50, // the maximal distance from the viewport top from which the snapping occurs
easing: 'easeOutBack', // easing function
offset: 0, // the vertical offset the snapping move must take
duration: 200 // the number of milliseconds during which the snapping animation takes place
});
});
</script>

Change log:

2014-09-30

• update.

2014-09-12

• fixed jquery.scrollsnap.js

2014-09-10

• added patch for ie11

2014-05-23

• some optimization

v1.0.1 (2014-01-24)

• added snap latency configuration

---

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