Smooth Page Scrolling Navigation with PageScroller

Written by Kevin Liew on 23 Feb 2012
21,417 Views • Javascript

Introduction

PageScroller is a powerful JavaScript based smooth scrolling navigation system that utilizes the robust jQuery library. Created entirely with ease of use in mind, the plugin will work on any website. That's a statement from PageScroller website, and I have to agree with that. Creating page scrolling with navigation can't be any easier than this. Page scrolling is one of the famous website layouts used in digital agency or personal portfolio websites.

And for those who are not script savvy, you can follow the simple instructions and create a cool layout in minutes!

Just to demonstrate how simple it is, this is the HTML you need:

<div id="main">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

And, this is the Javascript to execute the plugin:

$(function () {
	$('#main').pageScroller({ sectionClass: 'section' });
});

It's dead simple!

Features

  • Support left, right and top nav
  • Next & Prev Navigation
  • Support callback event: animationBefore, animationComplete and onChange
  • Custom function such as next(), prev() and goTo() for script customization
  • Predefined two styles: dark and white
  • Graceful degradation for old browsers
  • Easy to integrate

Screenshots

SPECIFICATIONS & DOWNLOAD

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.