Small Fullscreen Vertical Scrolling Plugin - Fullpage

A lightweight and cross-browser jQuery vertical scrolling plugin which allows you to scroll through a set of full screen sections by mouse wheel or by navigation links.

Basic usage:

1. Load jQuery library, jQuery Mouse Wheel plugin and the jQuery fullpage plugin at the bottom of your one page scrolling website.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>
<script src="fullpage.js"></script>

2. Create the html for a one page website consisting of multiple full screen sections.

<div class="box">
  <div class="section s1 active">
    Section 1
  </div>
  <div class="section s2">
    Section 2
  </div>
  <div class="section s3">
    Section 3
  </div>
  <div class="section s4">
    Section 4
  </div>
  <div class="section s5">
    Section 5
  </div>
</div>

3. Load jQuery library, jQuery Mouse Wheel plugin and the jQuery fullpage plugin at the bottom of your one page scrolling website.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>
<script src="fullpage.js"></script>

4. The required CSS styles for the fullscreen sections.

html,
body {
  margin: 0;
  overflow: hidden;
}

.box {
  position: relative;
  height: 100%;
  overflow: hidden;
  transition: transform 0.3s linear;
}

.section {
  overflow: hidden;
  height: 100%;
}

5. Style the side navigation links.

.controlBtns {
  position: fixed;
  top: 50%;
  right: 10px;
  margin-top: -40px;
  _position: absolute;
}

.controlBtns a {
  width: 10px;
  height: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 50%;
  background-color: #9f9f9f;
  display: block;
}

.controlBtns a.active { background-color: #fff; }

6. Call the plugin.

$('.box').FullPage({

  // CSS class for content sections
  section:'.section', 

  // active CSS
  active:'active', 

  // CSS class for container
  container:'.box', 

  // CSS class for side navigation
  controller:'.controlBtns',

  // animation speed
  speed: 300,

  // transition delay
  delay: 600,

  // callback
  callback:function(i) {
    switch (i) {
      case 0:
        document.title = 1;
        break;
      case 1:
        document.title = 2;
        break;
      case 2:
        document.title = 3;
        break;
      case 3:
        document.title = 4;
        break;
      case 4:
        document.title = 5;
        break;
      default:
        break;
    }
  }
  
});

---

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