Scrollify logoScrollify Download

Scrollify: Smooth Section Snapping for jQuery

Scrollify is a lightweight jQuery plugin that turns a long page into full-height panels. Each scroll, swipe or key press glides neatly to the next section, while hash links keep every panel shareable.

Download Scrollify Read the Guide
Version 1.0.22MIT licencejQuery 1.7+
Overview

What Is Scrollify?

Scrollify is an open-source jQuery plugin, written by Luke Haas, that assists scrolling and snaps the page to defined sections. Instead of drifting freely, the page moves one complete panel at a time.

You choose which elements count as sections by passing a CSS selector. The plugin measures them, sets their height to the window and listens for scroll input.

When a visitor scrolls, presses an arrow key or swipes on a phone, Scrollify animates smoothly to the neighbouring panel. This suits product launches, portfolios and storytelling pages.

  • Works with any element, not only the section tag.
  • Supports mouse wheel, trackpad, keyboard and touch input.
  • Runs in Chrome, Firefox, Safari, Edge and Opera.
Browser window showing Scrollify snapping smoothly from one full-height panel to the next
Features

Key Features of Scrollify

The plugin covers the essentials of section-based scrolling, with enough options and methods to adapt it to most layouts.

Smooth section snapping

Each scroll gesture glides to the next panel and settles precisely at its top edge, so content is never left half in view.

Touch-optimised

Vertical swipes on phones and tablets move between sections, while tall panels still scroll normally inside.

Shareable section links

Section names update the address bar, so every panel has its own URL for bookmarks and menus.

Flexible options

Adjust speed, easing, offset, scrollbars and height handling to suit the design without editing the source.

Event callbacks

Run code before and after each transition, on resize and on first render, ideal for entrance animations.

Programmatic control

Methods such as move, next, previous and update give complete control from buttons, menus and scripts.

Interstitial sections

Headers, footers and short content bands keep their natural height while remaining part of the flow.

Lightweight footprint

A single readable script with jQuery as its only dependency, so it adds very little to page weight.

Keyboard support is built in as well. The Up and Page Up keys move to the previous panel, while Down and Page Down move to the next, so visitors who never touch a mouse can still move through the page comfortably.

Installation

How to Install Scrollify

Setting up Scrollify takes a few minutes. The only requirement is jQuery 1.7 or later, loaded before the plugin.

  1. Step 1Download the files

    Download the ZIP from this page, or install the package with npm install jquery-scrollify. Bower users can run bower install Scrollify instead.

  2. Step 2Add the scripts

    Load jQuery first, then jquery.scrollify.js, near the end of the body. Reversing this order is the most common cause of a plugin that does nothing.

  3. Step 3Mark up the sections

    Give every full-height block the same class. Add a data-section-name attribute to each one if you want readable, shareable links such as #features.

  4. Step 4Initialise the plugin

    Call the plugin once the document is ready:

    $(function () {
  $.scrollify({ section: ".panel" });
});

  5. Step 5Test on real devices

    Scroll with a mouse, a trackpad, the arrow keys and a phone. Each gesture should move exactly one panel, and resizing the window should keep panels full height.

Prefer a CDN? Scrollify is also hosted on cdnjs. Pin an exact version in the URL so that future releases never change behaviour without warning. For bundled projects, import jQuery first, expose it on the window object, and then import the plugin.

Configuration

Scrollify Options at a Glance

Only the section selector is required. The remaining options let you fine-tune motion, layout and behaviour.

OptionDefaultPurpose
sectionRequiredCSS selector for the panels.
sectionName"section-name"Data attribute holding each panel's hash.
interstitialSection""Selector for blocks that keep their natural height.
easing"easeOutExpo"Animation curve for each transition.
scrollSpeed1100Transition length in milliseconds.
offset0Pixel offset applied to every section position.
scrollbarstrueShows or hides the browser scrollbar.
setHeightstrueSets each panel to the window height.
updateHashtrueUpdates the URL as panels change.
touchScrolltrueHandles swipe gestures on touch screens.

Four callbacks, before, after, afterResize and afterRender, run your own code at key moments. The options guide explains each setting in detail.

Any option can be changed after initialisation with $.scrollify.setOptions(). This is useful for slowing transitions on large screens or adjusting the offset when a header changes height.

A sensible starting point for most landing pages is a scroll speed between 800 and 1100 milliseconds, the default easing and a negative offset equal to any fixed header. Change one setting at a time and test after each adjustment, because small differences in speed are surprisingly noticeable on a trackpad.

Comparison

Scrollify or CSS Scroll Snap?

Modern browsers offer CSS scroll snapping through scroll-snap-type. It is ideal for simple carousels and needs no JavaScript.

Scrollify suits pages that need more control: eased transitions, shareable hash links, callbacks and methods such as move and next.

Choose CSS for lightweight snapping; choose Scrollify when transitions, navigation and events matter to the design.

Free scrolling page split mid-view compared with a Scrollify page showing one panel in view
Download

Download Scrollify

The archive contains the plugin source, the MIT licence and the README.

Extract the ZIP, copy jquery.scrollify.js into your project and load it after jQuery.

Download Scrollify ZIP Free, no registration required
  • File nameScrollify-master.zip
  • Version1.0.22
  • Archive size11.4 KB
  • LicenceMIT
  • RequirementjQuery 1.7 or later
  • PlatformAll modern browsers
Guide

Learn Scrollify Step by Step

Practical articles covering installation, configuration and the issues developers meet most often. Each one focuses on a single task, with code you can copy and adapt.

View all guide articles
FAQ

Frequently Asked Questions

Short answers to the questions most often asked about Scrollify.

Scrollify is a jQuery plugin that snaps a web page to full-height sections as the visitor scrolls. It responds to the mouse wheel, trackpads, the arrow and Page keys, and touch gestures, animating smoothly from one panel to the next.

Yes. Scrollify is released under the MIT licence, which permits use in personal and commercial projects. The only condition is that the copyright and licence notice stay with the source file.

Scrollify requires jQuery 1.7 or later and runs well with the current 3.x releases. Use the full build of jQuery rather than the slim build, because the slim build omits the animation module the plugin relies on.

Yes. The plugin is touch-optimised and responds to vertical swipes. If you prefer native scrolling on small screens, set touchScroll to false or call $.scrollify.disable() below a chosen width.

Yes. Add a data-section-name attribute to each section. Scrollify then updates the address bar as panels change, so a link such as #pricing opens the page at the matching panel.

No. Scrollify sections can be any element, such as a div or an article. The plugin selects them with the CSS selector you provide in the section option.

No. Scrollify supports vertical scrolling only. Horizontal movement inside a panel needs a separate carousel or slider, listed in standardScrollElements so its gestures work normally.

Usually, collapsed content has caused a wrong height calculation. Clear any floated elements, and call $.scrollify.update() after late-loading images or web fonts have finished loading.

Yes. Set a negative offset equal to the header height, for example offset: -72, so the top of each panel is not hidden. Alternatively, add matching top padding to every panel.

Call $.scrollify.destroy(). It removes every event listener and the heights the plugin set, returning the page to normal scrolling without a reload.

Conclusion

Is Scrollify Right for Your Project?

Scrollify offers a dependable way to build pages that move one full-height section at a time. It needs only jQuery, a section selector and a single initialisation call.

Its options, callbacks and methods allow precise control when a design calls for it, while sensible defaults keep simple pages simple.

Before committing, consider your content. Scrollify works best when each panel holds one clear idea, a strong image and a short block of text.

For text-heavy pages, standard scrolling may still serve readers better, and the plugin can be disabled on small screens with a single method call.

If your page tells a story screen by screen, Scrollify is well worth trying. Download the files, follow the setup steps and refine the result with the guide.

Get Scrollify