Touch-enabled Fullpage Scroller In jQuery - pageScroller.js

pageScroller.js is a jQuery plugin that turns your page with sections (100% viewport height) into a vertical fullscreen page slider (also called one page scroll).

Your users can scroll up and down your page sections in sequence with mouse scroll or touch swipe events.

How to use it:

1. Add page sections to your HTML page.

<div id="container">
  <section class="page1">
    Section 1
  </section>
  <section class="page2">
    Section 2
  </section>
  <section class="page3">
    Section 3
  </section>
  <section class="page4">
    Section 4
  </section>
  <section class="page5">
    Section 5
  </section>
</div>

2. Make those page sections fullscreen.

section { 
  height: 100vh; 
}

3. Load the required jQeury library and jQuery touchSwipe plugin (for touch support) in the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery.touchSwipe.min.js"></script>

4. Call the function pageScroller on the top container and done.

$(function(){
  $('#container').pageScroller();
});

5. Config the one page scroll effect.

$('#container').pageScroller({

  // animation speed in ms
  travelTime:1000,

  // delay in seconds
  afterTravelTimeout:1,

  // additional easing function
  travelEasing:'swing'
  
});

6. Define an array of anchor links that can be used to scroll through those page sections manually. Useful for sticky header navigation.

$('#container').pageScroller({

  anchors:['.anchor1','#anchor2','.anchor3']

});

7. Set the index of your starting page section. Default: 0 (section 1).

$('#container').pageScroller({

  startingPage: 1

});

8. Callback functions.

$('#container').pageScroller({

  onTrigger: function(none, targets) {
    // do something
  },
  
  onEnd : function(none, targets) {
    // do something
  }

});

---

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