Difference between revisions of "Team:Jilin China/test wiki"

Line 1: Line 1:
−
<!doctype html>
 
 
<html lang="en">
 
<html lang="en">
  

Revision as of 14:35, 16 September 2016

jQuery Scrollify

SCROLLIFY

Power steering for your scroll wheel

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

Fully configurable and optimised for touch.

Basic Setup

Scrollify requires jQuery 1.6+ and an easing library such as jquery.easing.js.

	<! 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,
		before:function() {},
		after: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.
before
A callback that is called 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 called after a new section is scrolled to. Arguments include the index of the section and an array of all section elements.

Methods

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("move","#name");