Basic Cross-platform One Page Scroll Plugin With jQuery - fullpage

File Size: 6.06 KB
Views Total: 19534
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Basic Cross-platform One Page Scroll Plugin With jQuery - fullpage

Just another jquery one page scroll plugin which applies a fast, performant, mobile-friendly vertical scrolling effect to your long webpage. The users are able to scroll between pages via mouse wheel or touch swipe events.

How to use it:

1. Add page sections to your html document:

<div id="fullpage">
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
  ...
</div>

2. Make the sections fullscreen no matter how you resize the screen.

#fullpage {
  height: 100vh;
  overflow: hidden;
}

#fullpage section { height: 100vh; }

3. Add jQuery library and the fullpage.js script right before the closing body tag.

<script src="//code.jquery.com/jquery-3.2.0.min.js"></script> 
<script src='jquery.fullpage.min.js'></script> 

4. Call the function and the plugin will take care of the rest.

$('#fullpage').fullpage();

5. Sometimes you might need to remove the click delays on modal devices.

<script src='/path/to/fastclick.min.js'></script> 
FastClick.attach(document.body);

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