jquery vertical mousewheel smooth scrolling
jquery, mousewheel, parallax.js, smooth-scrolling
Solution
I know it's a really old post, but here is a good solution I made :
function handle(delta) {
var animationInterval = 20; //lower is faster
var scrollSpeed = 20; //lower is faster
if (end == null) {
end = $(window).scrollTop();
}
end -= 20 * delta;
goUp = delta > 0;
if (interval == null) {
interval = setInterval(function () {
var scrollTop = $(window).scrollTop();
var step = Math.round((end - scrollTop) / scrollSpeed);
if (scrollTop <= 0 ||
scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
goUp && step > -1 ||
!goUp && step < 1 ) {
clearInterval(interval);
interval = null;
end = null;
}
$(window).scrollTop(scrollTop + step );
}, animationInterval);
}
}
Test it : http://jsfiddle.net/y4swj2ts/3/
Problem
I'm making a parallax website and I would like to make the page scroll smoother with the mousewheel for a better user experience. The best example I could get was this website: http://www.milwaukeepolicenews.com/#menu=home-page It would be great if I could get something similar to that into my website, the smooth vertical scrolling and scroll inertia. I noticed they are using Brandon Aaron's jQuery mousewheel which is very light but I'm just a beginner and cannot make it work by myself. Also i noticed this in their mpd-parallax.js: ``` jQuery(window).mousewheel(function(event, delta, deltaX, deltaY){ if(delta < 0) page.scrollTop(page.scrollTop() + 65); else if(delta > 0) page.scrollTop(page.scrollTop() - 65); return false; }) ``` Thank you! EDIT I'm almost there. Take a look at this fiddle: http://jsfiddle.net/gmelcul/cZuym/ It only needs adding an easing method to scroll just like the Milwaukee Police website.