Documentation

Comprehensive overview of configuration and customization options

1. Getting Started

Include the Page Scroller javascript file within the tag of your document. Be sure to include a copy of the jQuery library, version 1.4 or higher.

<script type="text/javascript" src="./javascripts/pagescroller.js"></script>

2. Calling the Page Scroller Plugin

When initiating Page Scroller, you must select the parent element that contains each targeted section. All sections have an assumed class of 'section' (or <section> tag with HTML5mode). You must initiate after all DOM elements have loaded or when the DOM is ready.

$('#wrapper').pageScroller();

3. Set a Unique Section Class

Do your target sections share a different class name? Set the 'sectionClass' property.

$('#wrapper').pageScroller({ sectionClass: 'container' });

4. Creating a Navigation

Page Scroller creates a navigation element by default. The 'navigation' property accepts an array() of link names (string), a list of <a> tags within a specified <ul> element, or, respectively, you can set 'navigation' to false if you do not want a navigation created.

var navLabels = new Array('Home', 'Portfolio', 'Services', 'Contact');
$('#wrapper').pageScroller({ navigation: navLabels });

Customization Options:

Below are a list of available options for the Page Scroller object.

Property Default Description
animationSpeed 500 Set the speed in which the page animation between sections. Value is an integer in milliseconds.
animationType 'swing' PRO Set the type of animation when animation between sections. Use an easing library for extended animation type.
keyboardControl true PRO When enabled, hijacks the default function of arrow keys to snap animate between page sections.
deepLink false PRO When enabled, appends a hash tag to the widow URL when navigating. Link visitors to a specific section.
sectionClass 'section' IMPORTANT: Specify the common class name for each section targeted by the Page Scroller plugin.
navigation array() Option accepts an array of navigation names (string) or an array of anchors (ie: '#navigation' or '.links a').
navigationClass 'standardNav light' Alter the navigation class to use any of the skins. (standardNav, iconNav, topNav, etc.)
navigationLabel 'Navigation' PRO Label element for Drop Down and Slide Out navigation skins.
linkClass 'link' Add a unique class to each Page Scroller link for added customizability.
scrollOffset 0 Adjust the destination point of each section with a positive or negative integer (pixels).
HTML5mode false Adjust the destination point of each section with a positive or negative integer (pixels).
animationBefore   PRO callback function performed before scrolling animation
animationComplete   PRO callback function performed after scrolling animation
onChange   PRO callback function performed when navigation is updated 
$('#main').pageScroller({
	animationSpeed: 1000,
	animationType: 'easeInOutElastic',
	scrollOffset: -50,
	keyboardControl: false,
	sectionClass: 'container',
	animationBefore: function(){
		//execute 'before' callback
	}
});

API Controls:

Control the Page Scroller object with these built in API commands.

Function Description
next() animates page to next section
prev() animates page to previous section
goTo() PRO animates page to specified section, slide number (integer)
current PRO returns the index value of the current section 
// scroll to fourth section on fire of click event
$('.button').bind('click', function(){
	pageScroller.goTo(4);
});

Example: Top Navigation Bar

The following example details the necessary components for initiating the 'Top Nav' skin.

$('#wrapper').pageScroller({
	navigation: '#myNavigation',
	scrollOffset: -50	
});

Continuing along, the new two sections of HTML markup detail the navigation element and page structure. Be sure to include both plugin (.js) file, the skin file (.css) & the jQuery library (version 1.4+).

<div id="myNavigation" class="pageScrollerNav topNav">
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a></li>
		<li><a href="#">Link 5</a></li>
	</ul>
</div>
									
<div id="wrapper">
	<div class="section"></div>
	<div class="section"></div>
	<div class="section"></div>
	<div class="section"></div>
	<div class="section"></div>
</div>