Smooth Scrolling Made Simple

Basic Usage

To enable the smooth scrolling plugin include the following files within head tag of HTML:

• jQuery v1.3+
• Page Scroller Plugin
• Page Scroller CSS

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

Getting Started

Instantiate the plugin on DOM load:

$(document).ready(function(){
	$('#main').pageScroller();
});

Rename Navigation Links

Custom navigation link names can be set by passing an array:

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

Example HTML Structure

Sections must share a common class. All sections intended for smooth scrolling have an assumed class of "section" by default. Any block element can be substituted in place of both the sections and section parent. HTML5 elements are likewise supported. The JavaScript plugin will set the proper CSS positioning for the jQuery animation:

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

Change Section Class Name

To change the section class name, simply pass an alternative class when instantiating:

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

Available Options:

Example:

$('#main').pageScroller({
	animationSpeed: 1000,
	scrollOffset: 0,
	sectionClass: 'page-sections',
	animationBefore: function(){
		//execute 'before' callback
	}
});

API Controls:

Example:

$('.button').click(function(){
	pageScroller.goTo(4);
});