SCROLLIFY

Power steering for your scroll wheel

A jQuery plugin that assists scrolling and smoothly snaps to sections.

Fully configurable and optimised for touch.

https://github.com/lukehaas/Scrollify

Scroll for more « More Projects

Basic Setup

Scrollify requires jQuery 1.6+.

	<! doctype html>
	<html>
		<head>
			<script>
				$(function() {
					$.scrollify({
						section : "section",
					});
				});
			</script>
		</head>
		<body>
			<section></section>
			<section></section>
		</body>
	</html>
				

Configuration

	$.scrollify({
		section : "section",
		sectionName : "section-name",
		easing: "easeOutExpo",
		scrollSpeed: 1100,
		offset : 0,
		scrollbars: true,
		standardScrollElements: "",
		setHeights: true,
		before:function() {},
		after:function() {},
		afterResize:function() {},
		afterRender:function() {}
	});
				

Options

section
A selector for the sections.
sectionName
Scrollify lets you define a hash value for each section. This makes it possible to permalink to particular sections. This is set as a data attribute on the sections. The name of the data attribute is defined by 'sectionName'.
easing
Define the easing method.
offset
A distance in pixels to offset each sections position by.
scrollbars
A boolean to define whether scroll bars are visible or not.
standardScrollElements
A string of selectors for elements that require standard scrolling behaviour.
setHeights
A boolean to define whether Scollify assigns a height to the sections. True by default.
before
A callback that is fired before a section is scrolled to via the move method. Arguments include the index of the section and an array of all section elements.
after
A callback that is fired after a new section is scrolled to. Arguments include the index of the section and an array of all section elements.
afterResize
A callback that is fired after the window is resized.
afterRender
A callback that is fired after Scrollify's initialisation.

Methods

$.scrollify.move("#name");
				

The move method can be used to scroll to a particular section. This can take the index of the section, or the name of the section preceded by a hash.

$.scrollify.instantMove("#name");
				

The instantMove method can be used to scroll to a particular section without animation. It can be parsed the index of the section, or the name of the section preceded by a hash.

$.scrollify.next();
				

The next method can be used to scroll to a panel that immediately follows the current panel.

$.scrollify.previous();
				

The previous method can be used to scroll to a panel that immediately precedes the current panel.

$.scrollify.instantNext();
				

The instantNext method can be used to scroll to a panel that immediately follows the current panel, without animation.

$.scrollify.instantPrevious();
				

The instantPrevious method can be used to scroll to a panel that immediately precedes the current panel.

Methods Continued

$.scrollify.destroy();
				

The destroy method removes all Scrollify events and removes set heights from the panels.

$.scrollify.update();
				

The update method recalculates the heights and positions of the panels.

$.scrollify.current();
				

The current method returns the current section as a jQuery object.

$.scrollify.disable();
				

The disable method turns off the scroll snap behaviour so that the page scroll like normal.

$.scrollify.enable();
				

The enable method resumes the scroll snap behaviour after the disable method has been used.

$.scrollify.isDisabled();
				

The isDisabled method returns true if Scrollify is currently disabled, otherwise false.

$.scrollify.setOptions()
				

The setOptions method can be used to change any of the initialisation options. Just parse it an options object.