scroll page when scroll on div

Question

I have a div, when I scroll on div, page should scroll, how can I achieve this? Div has z-index higher than other page elements, it's on top of all page elements

Using javascript or jQuery, anything?

Edit: DIV is the top most element, other elements have lower z-index. Now top DIV is longer than viewport, so I need to scroll

Answer 1

Using jquery, attach an event listener on the div for scroll. In the event handler, change the document.scrollTo accordingly. Make sure the div is a floating dom element.

Answer 2

You can hook up the .Scroll() event on the div using jQuery: http://api.jquery.com/scroll/ . Then each time the callback is called I belive you can set the scrollTop position to something that corresponds to a similar position to the div.

$(function() {
    $('#yourDiv').scroll(function() {
        $(window).scrollTop($(window).height() * $(this).scrollTop() / $(this).height());
    });
});

This was just a rough guess. But the idea is to find how far down the div has scrolled and scroll the window down the same percentage.

Finally the div will need to be position: absolute; I believe.