I found lot of people searching for this, even me, I spend so much time of googling to find a script that is ready to use to achieve such nice functionality, but unfortunately I found nothing.

So I’ve decided to build my own. Lucky for you, it is already finished and here it is.

About the Script

The script is based in jQuery. The animation is based in CSS transition using the transform property, no jQuery animation is involve.

Using the scroll event, the target element will get transformed and moved to Y axis equivalent to the (negative) window.scrollTop value.

If you want to contribute or extend this script, you can fork it on github https://github.com/iahnn/jQuery-Momentum-Scroll

How to Use

To use the script is very easy. All you have to do is wrap your contents with a div.

Example

In case the contents inside the body tag were coded like this:

<body>
	<div class=”content-1”>
		...
	</div>

	<div class=”content-2”>
		...
	</div>

	<div class=”content-3”>
		...
	</div>
</body>

Wrap them all with a div to make the script work.

<body>
	<div>
		<div class=”content-1”>
			...
		</div>

		<div class=”content-2”>
			...
		</div>

		<div class=”content-3”>
			...
		</div>

		<ul>
			<li>...
		</ul>
	</div>
</body>

Next, include the script below after the jQuery library (inside the <script> tag or into your JavaScript template).

/**
 * jQuery Momentum Scroll
 * This will transform the native scroll of the browser into a very smooth scroll with momentum effect
 * https://github.com/iahnn/jQuery-Momentum-Scroll
 * licensed under MIT
 * version 1.0.2
 */
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
		, resizeTimeout
		, jmScroll = {
			_init: function() {
				if( wrapper.length == 1 ) {
					target.css({
						margin: '0',
						padding: '0',
						width: '100%',
						height: wrapper.height() + 'px'
					});
					
					wrapper.css({
						transition: 'transform ' + duration + ' ' + easing,
						position: 'fixed',
						top: '0',
						left: '0',
						width: '100%',
						padding: '0',
						zIndex: '2',
						display: 'block',
						backfaceVisibility: 'hidden'
					});

					jmScroll._reFlow(function() {
						jmScroll._scroll();
					});
				}
			},

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

			_reFlow: function(callback) {
				clearTimeout(resizeTimeout);
				resizeTimeout = setTimeout(function() {
					target.height(wrapper.height());

					var getType = {};
					var isCallback = callback && getType.toString.call(callback) === '[object Function]';

					if(isCallback) {
						callback();
					}
				}, 200);
			}
		};

	if (typeof window.ontouchstart == 'undefined') {
		win.on({
			scroll: function () {
				jmScroll._scroll();
			}
			, resize: function() {
				jmScroll._reFlow();
			}
			, load: function() {
				jmScroll._init();
			}
		});
	}
});

And you’re done. Easy.

Click the demo link below to see the script in action.