Tiny jQuery Scroll And Snap Plugin For Vertical Scrolling - snap-points

File Size: 9.63 KB
Views Total: 1597
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Tiny jQuery Scroll And Snap Plugin For Vertical Scrolling - snap-points

snap-points is a very small jQuery plugin that scroll and snap to the next content section as you scroll through the webpage. This can help readers not lose their place or just make the page look cleaner. Ideal for one page scrolling websites and single page web applications.

How to use it:

1. Place jQuery library and the jQuery snap-point plugin at the end of the html document.

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

2. Add the html5 data attribute data-snap="true" to your elements. Each element with the data-snap="true" attribute on the webpage will have a snap point attached to it.

<h1 data-snap="true">Snap Points Demo 1</h1>
<p data-snap="true">...</p>

3. You can also attach the snap point to specified element like this:

snapAll("h1");

4. Change the default scrolling behaviors.

// Default scroll speed.
var scrollSpeed = 250; 

// Waiting time to make sure the user is done scrolling.
var scrollWait = 250; 

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