Easy jQuery Plugin For Vertical Scroll Snapping - Scrollify

Easy jQuery Plugin For Vertical Scroll Snapping - Scrollify
File Size: 11.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Scrollify is a jQuery plugin that enhances your one page scrolling website experience by providing snapping behavior as you scroll down the page.


  • Scrolls through a set of sections with arrow keys, mouse move or touch swipe.
  • Snaps to sections when scrolling down/up.
  • Has the ability to hide the scrollbar.
  • Auto updates url locations on scroll.
  • Easing effects & callbacks supported.
  • Cross browser & cross device.
  • Touch events supported as well.

See also:

How to implement:

1. Load the latest version of jQuery javascript library and the jQuery scrollify plugin at the end of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="jquery.scrollify.js"></script> 

2. Load the jQuery easing plugin from a CDN for easing options (Optional).

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>  

3. Create a set of sections for your one page website.

  Section 2

  Section 2

  Section 3


4. Call the plugin on the sections.

$(function() {
section : "section",

5. Optional settings.

$(function() {

  // section should be an identifier that is the same for each section
  // A selector for the sections.
  section: "section", 

  // 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'.
  sectionName: "section-name", 

  // A CSS selector for non-full-height sections, such as a header and footer.
  interstitialSection: "",

  // Define the easing method.
  easing: "easeOutExpo", 

  // Scrolling speed in milliseonds
  scrollSpeed: 1100,

  // A distance in pixels to offset each sections position by.
  offset : 0, 

  // A boolean to define whether scroll bars are visible or not.
  scrollbars: true, 

  // Target container

  // A string of selectors for elements that require standard scrolling behaviour. 
  standardScrollElements: false,

  // A boolean to define whether Scollify assigns a height to the sections.
  setHeights: true,

  // Allows scrolling over overflowing content within sections

  // Updates the browser location hash when scrolling through sections
  updateHash: true,

  // Allows to handle touch scroll events

  // callbacks
  before:function() {},
  after:function() {},
  afterResize:function() {},
  afterRender:function() {}


6. Methods.

// Used to scroll to a particular section. 
// It can be parsed the index of the section, or the name of the section preceded by a hash.

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

// Used to scroll to a panel that immediately follows the current panel.

// Used to scroll to a panel that immediately precedes the current panel.

// Used to scroll to a panel that immediately follows the current panel, without animation.

// Used to scroll to a panel that immediately precedes the current panel.

// Removes all Scrollify events and removes set heights from the panels.

// The update methods recalculates the heights and positions of the panels.

// The current method returns the current section as a jQuery object.

// The disable method turns off the scroll snap behaviour so that the page scroll like normal.

// The enable method resumes the scroll snap behaviour after the disable method has been used.

// The isDisabled method returns true if Scrollify is currently disabled, otherwise false.

Change logs:


  • Respecting standardScrollElements in the keyHandler.


  • v1.0.19: Update


  • v1.0.17: Fixed Key event handler with Input types


  • v1.0.15: Disabling keyHandler callbacks when a textarea/select tag is focused


  • v1.0.13: bugfix


  • v1.0.12: fixed scrolling with scrollbar


  • v1.0.11: ammend keycodes


  • v1.0.10: add page up and page down keys


  • v1.0.9: add touchScroll option


  • v1.0.8: fix commonjs issue


  • v1.0.7: fix issue with moving to the top of sections


  • v1.0.6: shorten warning messages


  • v1.0.5


  • minor bugfix


  • fix issue with interstitialSections sections


  • JS update


  • add interstitialSection


  • add AMD and CommonJS support


  • multiple updates and bug fixes


  • bug fixes and new options - afterRender callback and standardScrollElements property


  • more methods and fix for kinetic scroll issue


  • update for destroy method


  • update for destroy method


  • momentum scrolling fix


  • new methods.


  • fix issue with scrolling to the bottom of the final panel on touch devices


  • significant updates including news methods, fix for issues with trackpads and Apple mice, sizing of panels is now handled internally


  • update


  • fix issues around touch


  • recalculate section positions on resize


  • fix link touch issue


  • fix for issue around not setting sectionNames

This awesome jQuery plugin is developed by lukehaas. For more Advanced Usages, please check the demo page or visit the official website.