Custom Fullscreen One Page Scroll Plugin with jQuery - PageSwitch

Just another one page scroll plugin for jQuery that allows your visitor to scroll vertically or horizontal through all the different sections within the document, with pagination, keyboard navigation, snapping and callback support.

How to use it:

1. Include the required stylesheet PageSwitch.css in the head section of the document.

<link rel="stylesheet" href="css/PageSwitch.css">

2. Add fullscreen content sections to your webpage.

<div id="container" data-PageSwitch>
  <div class="selections" style="position:relative">
    <div class="selection" id="selection0"> 
    </div>
    <div class="selection" id="selection1"> 
    </div>
    <div class="selection" id="selection2"> 
    </div>
    <div class="selection" id="selection3"> 
    </div>
    <div class="selection" id="selection4"> 
    </div>
  </div>
</div>

3. Include jQuery library and the jQuery PageSwitch plugin's script at the end of the document.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/PageSwitch.js"></script> 

4. Call the function on the top container to active the one page scroll effect.

$("#container").PageSwitch();

5. Plugin's default configuration options.

$("#container").PageSwitch({

  // selectors
  selectors:{
    selections:".selections",
    selection:".selection",
    page:".pages",
    active:".active"
  },

  // initial section
  index:0,

  // easing effect
  easing:"ease",
  
  // animation duration
  duration:"500",

  // inifinite looping
  loop:false,

  // enable pagination
  pagination:true,

  // keyborad navigation
  keyboard:true,

  // 'vertical' or 'horizontal'
  direction:"vertical",

  // callback function
  callback:""
  
});

---

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