jQuery Snap Scrolling Plugin For Single Page Website - snapscroll
File Size: | 512KB |
---|---|
Views Total: | 9529 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

snapscroll is a lightweight (~2kb) jQuery plugin designed for one page scrolling website that provides snapping functionality to enhances the scrolling experience. With snapscroll plugin, the browser window will snap to each snapping element when scrolling down or scrolling up the page.
You might also like:
- Apple iPhone 5S Website Like One Page Scroll Plugin For jQuery
- jQuery Dynamic One Page Scrolling Plugin - Scrolld.js
- Apple-Like Vertical One Page Scrolling Plugin For jQuery - slidescroll
- Apple iPhone 5S Website Like One Page Scroll Plugin For jQuery
- jQuery Plugin For Fullscreen One Page Scrolling Websites - fullPage.js
- jQuery Plugin For Animated Vertical Scroll Snapping - Scrollsnap
- jQuery Plugin For Aligning Nearly-Aligned Elements - Snappy
- jQuery Plugin For Smooth Scroll Snapping - panelSnap
How to use it:
1. Include the latest jQuery library on the web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2. Include required javascript files on the web page after jQuery library.
<script type="text/JavaScript" src="../core/dependencies/jquery.scroll_to.js"></script> <script type="text/JavaScript" src="../core/jquery.snapscroll.js"></script>
3. Creating the one page scrolling layout using Html unordered lists.
<ul class="content"> <li class="third"><h1>First Page</h1></li> <li class="second"><h1>Second Page</h1></li> <li class="first"><h1>Third Page</h1></li> <li class="second"><h1>Fourth Page</h1></li> <li class="third"><h1>Fifth Page</h1></li> </ul>
4. For Single Page Websites, SnapScroll only works with containers set to 100% window height.
body { height: 100%; ... }
5. Call the plugin and you're done.
$(function() { $("ul.content").snapscroll(); });
This awesome jQuery plugin is developed by wtm. For more Advanced Usages, please check the demo page or visit the official website.