Touch-enabled Fullpage Scroller In jQuery – pageScroller.js

Layout
File Size: 7.23 KB
Views Total: 653 views
Last Update:March 31, 2021
Publish Date: May 12, 2017
Official Website: Go to website
License: MIT
Plugin Author: Zenoo
Demo    Download

pageScroller.js is a full page scroll jQuery plugin that convert your normal page with sections (100% viewport height) into a vertical full screen page slider (also known as one page scroll). Users can page scroll up and down sections in sequence with mouse scroll or touch swipe events. multi sections or pages display one time at once.

How to use :

Add script as 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>

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>

Make those page sections fullscreen.

section { 
  height: 100vh; 
}

Call the function pageScroller on the top container and done.

$('#container').pageScroller({
    travelTime:500,
    afterTravelTimeout:50,
    travelEasing:'swing',
    startingPage:0,
    anchors:['.test1','#test2','li.test3>a'],
    onTrigger : function(e) {
        console.log(e);
    },
    onEnd : function(e) {
        console.log(e);
    }
});

Done

List Of Version :
  • v1.1.1

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.