Adjust scroll position to a closest div

Question

Here i have bunch of div's with some related contents.

I want to adjust the scroll position to a closest div

Example Website

Demo Fiddle

How can i do this using jQuery

JQuery

$(".item").scroll( function( ) {
    $(".item").css({ top: $(this).scrollTop( ) });
});

Could anyone help me,

Thanks in Advance.

Answer 1

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

Try before buy