How do I synchronize the scroll position of two divs?

$('#bottom').on('scroll', function () {
    $('#top').scrollTop($(this).scrollTop());
});

Here we are using .scrollTop() for all it’s worth, getting the scrollTop value from the element with scroll-bars, and setting the scrollTop for the other element to sync their scroll positions: http://api.jquery.com/scrollTop

This assumes that your bottom element has an ID of bottom and your top element has an ID of top.

You can hide the scroll-bars for the top element using CSS:

#top {
    overflow : hidden;
}

Here is a demo: http://jsfiddle.net/sgcer/1884/

I suppose I’ve never really had a reason to do this, but it looks pretty cool in action.