jQuery Plugin For Beautiful Full Window Scrolling Website - pagePiling.js

Yet another jQuery one page scrolling plugin which allows your to vertically and smoothly slide the web page to desired anchor point.

More features:

• Anchor links & side bullets navigation.
• Pile your sections one over another and access them scrolling or by URL.
• Mousewheel, touch swipe and keyboard navigation.
• Supports background images.
• Looping top and bottom enabled. (Loop demo)
• Lots of options and callback events support. (Callbacks demo)

Basic Usage:

1. Include jQuery library and the JQuery pagePiling.js plugin's script and stylesheet in your web page.

<link rel="stylesheet" href="jquery.pagepiling.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.pagepiling.min.js"></script>

2. Create a set of content sections for your one page website.

<div id="pagepiling">
  <div class="section" id="section1">
    <h1>pagePiling.js jQuery Plugin Demo</h1>
    <p>This is section 1</p>
  </div>
  <div class="section" id="section2">
    <div class="intro">
      <h1>Section 2</h1>
      <p>This is section 2</p>
    </div>
  </div>
  <div class="section" id="section3">
    <div class="intro">
      <h1>Section 3</h1>
      <p>This is section 3</p>
    </div>
  </div>
</div>

3. Create anchor links which allows the visitor to navigate through the sections manually.

<ul id="menu">
  <li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
  <li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
  <li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
</ul>

4. Initialize the plugin and set the options for the one page scrolling website.

$(document).ready(function() {
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3'],
sectionsColor: ['#bfda00', '#2ebe21', '#2C3E50', '#51bec4'],
loopTop: true,
loopBottom: true
});
});

5. All the default options.

menu: null, // A selector can be used to specify the menu to link with the sections. 
verticalCentered: true,
sectionsColor: [],
anchors: [],
scrollingSpeed: 700,
easing: 'swing', // requires jQuery UI or jQuery easing plugin
loopBottom: false,
loopTop: false,
css3: true,
navigation: {
  'textColor': '#000',
  'bulletsColor': '#000',
  'position': 'right',
  'tooltips': ['section1', 'section2', 'section3', 'section4']
},
normalScrollElementTouchThreshold: 5,
touchSensitivity: 5,
keyboardScrolling: true,
sectionSelector: '.section',
animateAnchor: false,
//events
afterLoad: null,
onLeave: null,
afterRender: null

6. Public methods.

//Scrolls one section up:
$.fn.pagePiling.moveSectionUp();
// Scrolls one section down:
$.fn.pagePiling.moveSectionDown();
//Scrolls the page to the given section.
$.fn.pagePiling.moveTo('firstSection');
//Scrolling to the 3rd section in the site
$.fn.pagePiling.moveTo(3, 0);
//Which is the same as
$.fn.pagePiling.moveTo(3);
//Adds or remove the possiblity of scrolling through sections by using the mouse wheel/trackpad or touch gestures (which is active by default).
$.fn.pagePiling.setAllowScrolling(false);
//Adds or remove the possiblity of scrolling through sections by using the keyboard arrow keys (which is active by default).
$.fn.pagePiling.setKeyboardScrolling(false);
//Defines the scrolling speed in milliseconds.
$.fn.pagePiling.setScrollingSpeed(700);

Change log:

2018-03-08

• v1.5.5

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