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.
Browser testing via 