jQuery Snap Scrolling Plugin For Single Page Website - snapscroll

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

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:

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.