Html Use: Scrollify – jQuery Plugin For Scroll Snapping

Download Download Demo“]Demo[/button]

Scrollify is 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.

The most basic setup is as follows:

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

Configuration

This is the default configuration:

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

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.