jQuery Plugins › jQuery Layout Plugins › jQuery Scrollify

Easy jQuery Plugin For Vertical Scroll Snapping - Scrollify

File Size: 11.8 KB
Views Total: 47648
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2025

Chrome, IE7+, FireFox, Opera, Safari#scrolling#scroll snapping
Easy jQuery Plugin For Vertical Scroll Snapping - Scrollify

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

Features:

  • 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>
  Section 2
</section>

<section>
  Section 2
</section>

<section>
  Section 3
</section>

..

4. Call the plugin on the sections.

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

5. Optional settings with default values.

$(function() {
  $.scrollify({

  // 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
  target:"html,body",

  // 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
  overflowScroll:true,

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

  // Allows to handle touch scroll events
  touchScroll:true,

  // 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.
$.scrollify.move("#name");

// 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.instantMove("#name");

// Used to scroll to a panel that immediately follows the current panel.
$.scrollify.next()

// Used to scroll to a panel that immediately precedes the current panel.
$.scrollify.previous()

// Used to scroll to a panel that immediately follows the current panel, without animation.
$.scrollify.instantNext()

// Used to scroll to a panel that immediately precedes the current panel.
$.scrollify.instantPrevious()

// Removes all Scrollify events and removes set heights from the panels.
$.scrollify.destroy()

// The update methods recalculates the heights and positions of the panels.
$.scrollify.update()

// The current method returns the current section as a jQuery object.
$.scrollify.current()

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

// The enable method resumes the scroll snap behaviour after the disable method has been used.
$.scrollify.enable()

// The isDisabled method returns true if Scrollify is currently disabled, otherwise false.
$.scrollify.isDisabled()

Changelog:

2025-02-22

  • fix viewport height calc issue

2021-04-25

  • JS updated

2020-11-20

  • update events

2019-08-16

  • Update jquery.scrollify.js

2019-07-29

  • fix height on getportHeight to respect iOS different height in its menubars

2019-03-25

  • JS updated

2019-03-19

  • JS updated

2019-02-22

  • Fixing infinity loop on afterRender

2018-09-25

  • Fix setHeights Option

2018-03-20

  • Respecting standardScrollElements in the keyHandler.

2017-12-15

  • v1.0.19: Update

2017-08-04

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

2017-07-30

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

2017-03-11

  • v1.0.13: bugfix

2017-01-21

  • v1.0.12: fixed scrolling with scrollbar

2017-01-07

  • v1.0.11: ammend keycodes

2017-01-05

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

2016-12-13

  • v1.0.9: add touchScroll option

2016-11-29

  • v1.0.8: fix commonjs issue

2016-11-17

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

2016-11-05

  • v1.0.6: shorten warning messages

2016-10-02

  • v1.0.5

2016-07-27

  • minor bugfix

2016-07-13

  • fix issue with interstitialSections sections

2016-07-05

  • JS update

2016-06-02

  • add interstitialSection

2016-04-06

  • add AMD and CommonJS support

2016-03-14

  • multiple updates and bug fixes

2016-02-04

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

2015-10-27

  • more methods and fix for kinetic scroll issue

2015-09-08

  • update for destroy method

2015-09-05

  • update for destroy method

2015-08-22

  • momentum scrolling fix

2015-08-13

  • new methods.

2015-08-08

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

2015-08-02

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

2015-02-02

  • update

2015-01-16

  • fix issues around touch

2015-01-07

  • recalculate section positions on resize

2014-11-03

  • fix link touch issue

2014-06-30

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