Touch-enabled Fullpage Scroller In jQuery - pageScroller.js

File Size: 26.1 KB
Views Total: 1301
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 class="page2">
    Section 2
  <section class="page3">
    Section 3
  <section class="page4">
    Section 4
  <section class="page5">
    Section 5

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.


5. Config the one page scroll effect.


  // animation speed in ms

  // delay in seconds

  // additional easing function

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




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


  startingPage: 1


8. Callback functions.


  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.