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

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 class="section" id="section2">
    <div class="intro">
      <h1>Section 2</h1>
      <p>This is section 2</p>
  <div class="section" id="section3">
    <div class="intro">
      <h1>Section 3</h1>
      <p>This is section 3</p>

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>

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

$(document).ready(function() {
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,
afterLoad: null,
onLeave: null,
afterRender: null

6. Public methods.

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

Change log:


  • 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.

  • Publication date: 08.03.2018
  • Source