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
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