Easy Fullscreen Vertical Page Scroll Plugin With jQuery - Better Scroll

File Size: 6.66 KB
Views Total: 11345
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy Fullscreen Vertical Page Scroll Plugin With jQuery - Better Scroll

Better Scroll is a jQuery plugin designed for singe page website that provides fullscreen vertical page scrolling with sectioned content and snaps to next section after user scrolls.

How to use it:

1. Import jQuery library and the jQuery better scroll plugin into your project.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.betterScroll.js"></script>

2. Create sections for your single page website.

<div id="demo" class="page">
  <div class="page-section">
    <div class="page-frame">
      ... section 1 ...
    </div>
  </div>
  <div class="page-section">
    <div class="page-frame">
      ... section 2 ...
    </div>
  </div>
  <div class="page-section">
    <div class="page-frame">
      ... section 3 ...
    </div>
  </div>
</div>

3. Initialize the plugin by calling the function on the parent container.

$(document).ready(function () {
  $('#demo').betterScroll();
});

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