jQuery Plugin For Scroll And Snap Functionality - Scroll Snap

A simple, lightweight jQuery plugin for the scroll-and-snap functionality which automatically scrolls and snaps the specific element to the top of the browser window on vertical scrolling. Very useful in your one page scrolling website.

How to use it:

1. Create content sections which should be affected by the Scroll Snap plugin.

<section class="snap"></section>
<section class="snap"></section>
<section class="snap"></section>
...

2. The required CSS styles to hide the scrollbar during scrolling.

body.lock-scroll{
  overflow: hidden;
}

3. Place jQuery library and the jQuery Scroll Snap plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-scroll-snap.js"></script>

4. Call the scrollSnap method on the target element and done.

$( '.snap' ).scrollSnap();

5. Override the default scrolling speed.

$( '.snap' ).scrollSnap({
  speed: 400
});

Change log:

2016-11-28

• JS update

---

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