Smooth Momentum Scrolling Effect with jQuery - Momentum Scroll

Momentum Scroll is a super tiny (~2kb) jQuery plugin that uses jQuery easing and CSS3 transitions / transforms to implement mobile style very smooth inertial / momentum scrolling effect on your webpage.

How to use it:

1. Load the necessary jQuery library in your web project.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

2. The core JavaScript to enable the smooth scroll effect.

jQuery(function($) {

"use strict";

var win = $(window)
    , target = $('body')
    , wrapper = target.find('> div')
    , easing = "ease-out" //css easing
    , duration = "1.2s" //duration ms(millisecond) or s(second)
    , top = 0
    , kineticScroll = {
        _init: function() {
            if( wrapper.length == 1 ) {
                target.height(wrapper.height());
                wrapper.css({
                    transition: 'transform ' + duration + ' ' + easing,
                    position: 'fixed',
                    top: '0',
                    left: '0',
                    width: '100%',
                    padding: '0',
                    zIndex: '2'
                });

                win.on({
                    scroll: function () {
                        kineticScroll._scroll();
                    }
                    , resize: function() {
                        target.height(wrapper.outerHeight());
                    }
                });

                kineticScroll._scroll();
            }
        },
        _scroll: function() {
            top = win.scrollTop();
            wrapper.css('transform', 'translateY(-' + top + 'px)');
        }
    };

if (typeof window.ontouchstart == 'undefined') {
    kineticScroll._init();
}
});

Change log:

2015-06-10

• Update jquery-momentum-scroll.js

---

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