Scroller

Single page scrolling navigation

Navigation can be a challenge on long single pages. How to simplify interaction? How to keep visitors from getting lost? Scroller.

Scroller builds a nav for scrolling through sections in a page.

Demo Download


Usage

1. Include the Script


«script src="jquery.js"»«/script»
«script src="jquery.scroller.js"»«/script»

2. Instantiate the Script


$.scroller();


Defaults

The default settings:


var defaults = {
scroll_nav_id:'scroll-nav',
section_class:'scroll-section',
button_main_id:'scroll-button',
section_buttons_wrapper_class:'scroll-section-buttons',
section_buttons_class:'scroll-section-button',
button_next_class:'scroll-button-next',
button_previous_class:'scroll-button-previous',
waypoint_offset:200,
speed:1000,
extra_spacing:-24
}

$.scroller(defaults);


Options

Pass in your own parameters.


var options= {
scroll_nav_id:'custom-scroll-nav',
button_previous_class:'scroll-button-previous',
speed:500
}

$.scroller(options);


Dependencies

jQuery
Waypoints (included)
Throttle (included)


Demo Download