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

RunJS - JavaScript playground

RunJS

RunJS is a JavaScript playground that evaluates your code as you type and gives instant feedback. It's ideal for prototyping ideas or trying out new libraries.

runjs.app

Scroll for more
« More Projects
Supported by

Basic Setup

Scrollify requires jQuery 1.7+.

  <! doctype html>
  <html>
    <head>
      <script>
        $(function() {
          $.scrollify({
            section : ".example-classname",
          });
        });
      </script>
    </head>
    <body>
      <div class="example-classname"></div>
      <div class="example-classname"></div>
    </body>
  </html>

Configuration

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

Options

section
A CSS selector for the sections of the page.
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'.
interstitialSection
A CSS selector for non-full-height sections, such as a header and footer.
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 CSS selector for elements within sections that require standard scrolling behaviour.
setHeights
A boolean to define whether Scollify assigns a height to the sections. True by default.
overflowScroll
A boolean to define whether Scrollify will allow scrolling over overflowing content within sections. True by default.
updateHash
A boolean to define whether Scrollify updates the browser location hash when scrolling through sections. True by default.
touchScroll
A boolean to define whether Scrollify handles touch scroll events. 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.

Examples

Browser testing via