scroll.To()

http://demos.flesler.com/jquery/scrollTo/

Presentation wise, we need a div element with {position:fixed} and a known height to serve as the 'scroll-area',
and another div placed inside it to serve as the 'scroll-block'. The scroll-block's size/position obviously needs
to be determined with a bit of scripting.

1. Calculate the percentage of scroll-zone to "fill" with scroll-block:
    var height_scale = $(window).height() / $(document).height()
2. Set height of scroll-block div:
    var block_height = height_scale * $('#scroll-zone').height();
    $('#scroll-block').css('height', block_height);
3. Create a mouseover event for the scroll-zone, and inside the handler:
    $('#scroll-zone').mouseover(function(e) {
        //get mouse coordinate of y-axis inside the scroll-zone
        var y = e.pageY - this.offsetTop;
        //now we need to find out the percentage of the page this corresponds with
        var percent_of_page = y / $('#scroll-zone').height();
        //this in turn lets us determine how much of page to scroll
        var scroll_position = percent_of_page * $(document).height()
        //so now we do the actual scrolling with that plugin from earlier
        $.scrollTo( {top:''+scroll_position+'px'}, 800);
        //and readjust the position of the scroll-block accordingly with the y mouse-coord from earlier
        $('#scroll-block).animate({top: y+'px'}, 5000, function() { });
    }