Here you go. You have to do a couple of things.
- listen when the scrolling stops
- find the "next" container
- scroll to its top value, without triggering "the scroll end detection"
JavaScript
var items = $(".item");
var animating = false;
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
if (!animating) {
$.data(this, 'scrollTimer', setTimeout(function() {
items.each(function(key, value) {
if ($(value).offset().top > $(window).scrollTop()) {
animating = true;
$('body').animate( { scrollTop: $(value).offset().top + 'px' }, 250);
setTimeout(function() { animating = false; }, 300);
return false;
}
});
}, 200));
}
});
The "scroll end detection" is coming from yckart's answer to jQuery scroll() detect when user stops scrolling. All timings from this example can be adjusted to your needs.
Demo