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.

For a widely used one-page scrolling approach, compare this with the fullPage.js plugin.

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
  }

});

Changelog:

v1.1.2 (2024-01-08)

• Bugfixes

---

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