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.
Table of Contents
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
Thanks for make jQuery plugin is developed by Zenoo For more Helpfull for users, please check the demo page or visit the official website.
