A jQuery plugin that assists scrolling and snaps to sections.

Related tags

Animations Scrollify
Overview

jQuery Scrollify

A jQuery plugin that assists scrolling and snaps to sections. Touch optimised.

Demo

http://projects.lukehaas.me/scrollify.

More examples

Scroll animations

Layered scrolling

Pagination

Full page video

Header and footer

Dynamic content

Basic setup

Scrollify requires jQuery 1.7+.

The most basic setup is as follows:

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

This is the default configuration:

$.scrollify({
    section : ".example-classname",
    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. For example standardScrollElements: ".map, .frame".

setHeights A boolean to define whether Scrollify 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. (This will be false if scrollbars is false)

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(index, sections) A callback that is fired before a section is scrolled to. Arguments include the index of the section and an array of all section elements.

after(index, sections) 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. It can be passed 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 passed 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.

$.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.currentIndex()

The currentIndex method returns the current section index, starting at 0.

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

Issues

If you're working with Scrollify and having issues, please post your questions to Stackoverflow and tag it with 'jquery-scrollify'.

If you think the issue is with Scrollify itself, please check the open issues to see if it has already been logged. If it hasn't, please open a ticket with a detailed description of what you're seeing and details of the device and browser version you're seeing it on.

FAQ

  • Do I have to use the section element for Scrollify sections?

No, Scrollify sections have no relation to the section element. Scrollify sections can be any element you want.

  • Can sections receive an active class when they are scrolled to?

Yes, this is something you can easily implement in either the before or after callbacks (which ever suites you best).

  • Can Scrollify be used for horizontal scrolling?

No, this is not currently supported.

  • Can I disable Scrollify on mobile?

Yes. Scrollify works well on mobile but if you need to disable it you can use the disable method. $.scrollify.disable().

  • Why am I not able to scroll to the bottom of a section?

You must ensure that there is no collapsed content within your sections. This often happens when you have floated content within a container that isn't cleared. All content must be properly contained in order for an accurate section height to be calculated.

  • Why are section heights increasing on resize?

This happens when your browser is running in Quirks Mode, usually as the result of an incorrect doctype.

Setup with SectionName

Scrollify appends a hash value to the URL for each section, this allows for permalinking to particular sections. To define the hash value for each section you need to set a data-attribute on your sections. This data attribute can be called anything you like. The default is "section-name", but if you'd like something else then you'll need to define it with the sectionName option.

<!doctype html>
  <html>
    <head>
      <script>
        $(function() {
          $.scrollify({
            section : ".section-class-name",
            sectionName : "section-name"
          });
        });
      </script>
    </head>
    <body>
      <div class="section-class-name" data-section-name="home"></div>
      <div class="section-class-name" data-section-name="about"></div>
    </body>
  </html>

Installation

  • bower - bower install Scrollify
  • npm - npm install jquery-scrollify

Browser Support

IE Chrome Firefox Opera Safari
IE 8+ Chrome Firefox Opera Safari

Browserstack

Special thanks to Browserstack for supporting Scrollify.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :)

License

MIT License

Comments
  • Allow preventDefault on wheelEvents, fix Chrome intervention console logs

    Allow preventDefault on wheelEvents, fix Chrome intervention console logs

    • Replace jQuery.on with addEventListener for wheelEvent
    • Add passive: true to event options
    • Check for event.originalEvent before accessing wheelDelta in wheelHandler function
    opened by timdk 32
  • bugs not always scroll works

    bugs not always scroll works

    Hi again,

    I updated from v.0.1.7 to 0.1.9. There are new method destroy. Which is great but there are some problems:

    1. Scroll works not always on mousewheel.
    2. On key press, the section is not entirely scrolled. Need to press twice to scroll a section.
    3. On using destroy method: Uncaught TypeError: Cannot set property '0' of null(anonymous function) @ jquery.scrollify.js:369m.extend.each @ jquery.min.js:2m.fn.m.each @ jquery.min.js:2sizePanels @ jquery.scrollify.js:363(anonymous function) @ jquery.scrollify.js:331
    opened by roshchyn 19
  • Scrolling on iPhone

    Scrolling on iPhone

    I really like this plugin, it works extremely well on desktops. However when I run it on my iPhone 5S (iOS 9.3.2), the scrolling is far from ideal. Scrolling up (swiping down) works like a charm but when I try to scroll down (swiping up) the page often doesn't scroll at all, or I have to swipe several times for the scroll to happen. Then once it starts scrolling down, it doesn't snap to the top of the section, it just stops the scroll where it would normally (without Scrollify). First I thought it was something with my implementation, but I could replicate the issue with the demo site as well when running it on my iPhone. Have you experienced the same at all? Do you have a fix for this? Thanks

    opened by SpacegoatHQ 14
  • ask for help

    ask for help

    <! doctype html>
    <html>
        <head>
            <script src="jquery-2.1.1.min.js"></script>
            <script>
                $(function(){
                    $(".test").css({"height":$(window).height()});
                    $.scrollify({
                        section:".test"
                    });
                });
            </script>
            <style>
                .test{
                    width: 100%;
                }
                .red{
                    background-color: red;
                }
                .blue{
                    background-color: blue;
                }
            </style>
        </head>
        <body>
            <section class="test red"></section>
            <section class="test blue"></section>
        </body>
        <script src="jquery.easing.1.3.js"></script>
        <script src="scrollify.min.js"></script>
    </html>
    

    browser always remind :“Uncaught TypeError: Cannot read property 'length' of undefined ”

    opened by Myu1533 14
  • move method not working on window load (working only after window resize or page refresh)

    move method not working on window load (working only after window resize or page refresh)

    I am trying to use move method on window load with the index but it doesn't work.

    $(window).on('load', function(){
        $.scrollify.move(3);
    });
    

    I can trigger the resize event

    $(window).on('load', function(){
        $.scrollify.move(3);
    }).resize();
    

    Now, this works but it scrolls to the defined section and goes back to the top section (0 index) and then only move again to the defined section.

    opened by ri8ika 12
  • Scroll to interstitialSection

    Scroll to interstitialSection

    For example i set footer as interstitialSection, easing: linear, scrollSpeed: 1000. I scroll from section with height 1000px to footer with height 100px. It will scroll to footer for 0.1s, rest 0.9s nothing will happen and scroll will be locked, because it will try to scroll down 1000px for 1s.

    When easing is not linear, in additional to locked scroll there will be distracting scroll stop effect

    opened by shrpne 11
  • Height set by Scrollify

    Height set by Scrollify

    Hi,

    Basically I've got sections at 100vh, technically that should mean the plugin shouldn't set heights? It does - any way around it? Also I have one section that's 200vh, same applies here. I would like it to remain 200vh.

    Thank you!

    opened by Rayken 10
  • Get keyboard navigation to work as on live demo page

    Get keyboard navigation to work as on live demo page

    On the live demo page keyboard navigation works pretty good (not perfectly though) for the spacebar, go to top/bottom keys, one up/down keys, and up/down arrows.

    However, using version 1.0.8 on my site, only the up/down arrows work, none of the other keys.

    How can I get the keyboard keys to fire the scroll events as they do on the demo site?

    I did start checking for keypresses myself, but thought maybe there is an easy setting I am missing somewhere...

    opened by katrinkerber 9
  • $.scrollify.current() does not update correctly on page refresh

    $.scrollify.current() does not update correctly on page refresh

    I'm using the before callback to add an active class to each section so I can update the z-index of the current section. If I'm looking at any section other than the first and I refresh the page and call the afterRender callback, the current method pulls the very first section instead of whichever one I'm looking at.

    Setup looks like this:

    $.scrollify({
       section: ".section",
       sectionName: false,
       scrollSpeed: 1500,
       setHeights: false,
       updateHash: false,
       before: function(index, sections) {
          var ref = sections[index].attr('data-section-name');
          $('.section').each(function() {
             if( $(this).attr('data-section-name') === ref ) {
                $(this).addClass('active-section');
             }
             else {
                $(this).removeClass('active-section');
             }
          });
       },
       afterRender: function() {
          console.log($.scrollify.current());
       },
    });
    

    Also, I tried changing the easing to easeInOutQuad (and several others found on easings.net) and I get jquery-2.2.1.min.js:3 Uncaught TypeError: n.easing[this.easing] is not a function when I try to scroll to the next/previous section. Separate issue, but thought I'd note it here while I'm at it.

    Thanks for the plugin!

    opened by dmcanaveral 8
  • Uncaught TypeError: Cannot read property 'hash' of undefined

    Uncaught TypeError: Cannot read property 'hash' of undefined

    Hello,

    somehow Scrollify is unusable to me. When I include the javascript file (compressed or uncompressed), I get the error:

    Uncaught TypeError: Cannot read property 'hash' of undefined

    There seems to be a problem with the line

    currentHash = window.location.hash,

    at the beginning of the plugin, but I'm unable to figure it out myself :/

    Gregor

    opened by gambolputty 8
  • I can't reactivate scrollify after use $.scrollify.destroy()

    I can't reactivate scrollify after use $.scrollify.destroy()

    This is my code

    var scrollifyOption = {
            section: '.frame',
            scrollSpeed: 400,
            afterResize: function() {
                if( $(window).width() < 768 ) {
                    $.scrollify.destroy();
                }
            },
        }
    
        if( $(window).width() > 768 ) {
            $.scrollify(scrollifyOption);
        }
    
        $(window).resize( $.debounce('300', function() {
        if( $(window).width() > 768 ) {
            $.scrollify(scrollifyOption);
        }
    }));
    

    I also try this https://github.com/lukehaas/Scrollify/blob/master/jquery.scrollify.js from this post https://github.com/lukehaas/Scrollify/issues/32 and this is console from Chrome

    console.log

    opened by boatkung 8
  • No scrollify for some section

    No scrollify for some section

    I guys,

    I would like to have the scrollify effect on the first 3 top section of my homepage then for the next section (the green one) a normal scroll.

    Is there a configuration, option, methods that can do that.

    my page test
    https://site-test-luneos.webflow.io/

    Thanks :)

    opened by Luneos 4
  • Clicking the scroll button, you go to the next section but then bounce back

    Clicking the scroll button, you go to the next section but then bounce back

    Hi there, I am using scrollify for my homepage. When I click the scroll button, I go to the next section as expected, but then immediately bounce back to the previous section.

    Here is the codepen

    Can you please advise on this? Many thanks

    UPDATE: I have also noticed that, when I scroll, it skips the first section and jumps directly to the third. There is no way to stop to the first section, even when you are further down and are scrolling up. Maybe the two issues are related? Thanks.

    opened by emmekkappa 0
  • setHeights: true doesn't seem to work properly

    setHeights: true doesn't seem to work properly

    Using the current latest version (1.0.21) of jquery.scrollify.js from Github, setHeights: true doesn't seem to work properly. The heights are way too big.

    However, it works if I use the 1.0.21 version of jquery.scrollify.js from https://projects.lukehaas.me/scrollify. This page seems to use a slightly older version of the scrollify script before the scroll container was changed from window to html,body.

    I'm using Chrome 97.0.4692.71 on a Mac. Tested with jQuery versions 3.5.1 and 2.2.1.

    opened by jw82uk 1
  • overflowScroll: true not working

    overflowScroll: true not working

    Using the current latest version (1.0.21) of jquery.scrollify.js from Github, overflowScroll: true doesn't seem to work.

    However, it works if I use the 1.0.21 version of jquery.scrollify.js from https://projects.lukehaas.me/scrollify. This page seems to use a slightly older version of the scrollify script before the scroll container was changed from window to html,body.

    I'm using Chrome 97.0.4692.71 on a Mac. Tested with jQuery versions 3.5.1 and 2.2.1.

    opened by jw82uk 1
  • Mozilla Bug - Console Message

    Mozilla Bug - Console Message

    This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

    • Above is the message appears on Firefox Console. And it is not working properly.

    https://79d4k66qaf0hj4ec-26284064823.shopifypreview.com/

    Also i used 3rd panel on desktop as background and set height as 100vh. Rest of the images from img tag so the height adjust itself. Without using as background everything works fine.

    opened by najeeboffice 0
  • Scrolling not smooth.

    Scrolling not smooth.

    https://ndbdtankbd6lqqhv-26284064823.shopifypreview.com/

          $.scrollify({
            section : "#MainContent .shopify-section",
            offset : getHeaderHeight,  
            interstitialSection: '#MainContent .shopify-section, #shopify-section-footer',
            updateHash: false,
            setHeights: false,
          });
    

    Can anyone help me fix this jumping or not smooth movement.

    For now this layout works on Desktop only.

    opened by najeeboffice 5
Owner
Luke Haas
Luke Haas
Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.

Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless View Demo: slickscroll.musabhassan.com Momentum Scroll

Musab Hassan 33 Dec 28, 2022
Animation library that mimics CSS keyframes when scrolling.

Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & B

Alexandru Cambose 580 Dec 30, 2022
A simple and easy jQuery plugin for CSS animated page transitions.

Animsition A simple and easy jQuery plugin for CSS animated page transitions. Demo & Installation http://git.blivesta.com/animsition/ Development Inst

Yasuyuki Enomoto 3.8k Dec 17, 2022
A jquery plugin for CSS3 text animations.

Textillate.js v0.4.1 See a live demo here. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations

Jordan Schroter 3.6k Jan 2, 2023
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

João Pereira 721 Dec 6, 2022
A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).

Material Design Preloader!s A jQuery plugin that recreates the Material Design preloader (as seen on inbox). I was fascinated when I first saw the pre

Aaron Lumsden 376 Dec 29, 2022
Lightweight, simple to use jQuery plugin to animate SVG paths

jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using

Leonardo Santos 762 Dec 20, 2022
Matteo Bruni 4.7k Jan 4, 2023
Super-smooth CSS3 transformations and transitions for jQuery

jQuery Transit Super-smooth CSS3 transformations and transitions for jQuery jQuery Transit is a plugin for to help you do CSS transformations and tran

Rico Sta. Cruz 7.4k Dec 23, 2022
Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti

Alex MacArthur 165 Dec 12, 2022
Unobtrusive page transitions with jQuery.

smoothState.js smoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user's browse

Miguel Pérez 4.5k Dec 21, 2022
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage.js English | Español | Français | Pусский | 中文 | 한국어 Available for Vue, React and Angular. | 7Kb gziped | Created by @imac2 Demo online | Cod

Álvaro 34.3k Dec 30, 2022
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!

Scrawl-canvas Library Version: 8.5.2 - 11 Mar 2021 Scrawl-canvas website: scrawl-v8.rikweb.org.uk. Do you want to contribute? I've been developing thi

Rik Roots 227 Dec 31, 2022
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

impress.js 37k Jan 2, 2023
Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator

Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator. This engine is a dependency for any Haiku Animator components that are run on the web.

Haiku 757 Nov 27, 2022
Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Mike Skowronek 793 Dec 27, 2022
🐿 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

anonymous namespace 256 Sep 19, 2022
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event.

TransitionEnd TransitionEnd is an agnostic and cross-browser library to work with event transitionend. Browser Support 1.0+ ✔ 4.0+ ✔ 10+ ✔ 10.5 ✔ 3.2+

Evandro Leopoldino Gonçalves 95 Dec 21, 2022
Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility

Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and

Benjamin De Cock 5.9k Jan 2, 2023