🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A plugin that allows you to define (full page) sections and scroll between them with mousewheel, keyboard, scrollbar and/or touch moves.

Menus Plugins Web

Documentation

jQuery Scroll Sections Plugin (Version 0.4.3)

A plugin that allows you to define (full page) sections and scroll between them with mousewheel, keyboard, scrollbar and/or touch moves.

Here is a very simple demo

Requirement (for a full support)

The following jQuery plugins are required for this plugin to work properly:

Examples

Here is a basic example

$('.my_sections').scrollSections(); 

Here is a example with custom navigation (full implementation in ./example/customNavigation.html)

$('.my_sections').scrollSections({ 	createNavigation: false, 	navigation: true });	 

Here is a full options example

$('.my_sections').scrollSections( {     // Attribute from which we retrieve the unique identifier for each section. 	attr: 'id', 	// The class that should be applied to the current navigation item. 	active: 'active-scrollsection', 	// Enable keyboard controls. 	keyboard: true, 	// Enable mousehweel controls. 	mousewheel: true, 	// Enable touch controls. 	touch: true, 	// Enable scrollbar controls. 	scrollbar: true, 	// Enable navigation controls, also see createNavigation option. 	navigation: true, 	// Maximum sections to scroll within mousewheel interaction. 	scrollMax: 1, 	// Function to execute before each scroll. 	// $currentSection [jQuery object] - the current visible section 	// $nextSection [jQuery object] - the futur selected section 	before: function($currentSection, $nextSection){}, 	// Function to execute after each scroll. 	// $currentSection [jQuery object] - the current visible section 	// $previousSection [jQuery object] - the previous section 	after: function($currentSection, $previousSection){}, 	// Prefix for classes and ids of DOM elements. 	prefix: 'scrollsections', 	// Scroll to first section on initialization, instead of the section that is visible. Also have a look at the option 	// animateScrollToFirstSection. 	alwaysStartWithFirstSection: false, 	// Scroll to initial section without animation. 	animateScrollToFirstSection: false, 	// Create navigation? If the option navigation is set to false, this will have no effect! 	createNavigation: true, 	// The animation speed. 	speed: 500, 	// Throw execption if something goes wrong. 	exceptions: false }); 

Cross-browser Compatibility

Modern browsers: Chrome, Firefox, Safari, Opera and IE8+

License

Under MIT license

Copyright(c) 2011-2013 Stéphane Guigné

Logs

v0.4.3 - send back arguments to callback functions


You May Also Like