Body scroll with mouse position?

Question

Basically, the functionality is here, it just needs some refinement that I don't know how to tweak, I've written this small snippet that does exactly what I want, but doesn't scroll the whole page, it just scrolls the "window" size.

Can anyone take this and make it amazing? :)

$(document).mousemove(function(e){
        percent = ((e.pageY) * 100) / $(this).height(); 
        $('body,html').scrollTop( percent);         
});

Answer 1

You may rather want to have a delta depending on how far the offset of mouse is with respect to the middle of the page: http://jsfiddle.net/BYUdS/2/. That way, you can keep scrolling down so that there is no scroll limit (what you have now).

$(document).mousemove(function(e) {
    $("html, body").scrollTop(function(i, v) {
        var h = $(window).height();
        var y = e.clientY - h / 2;
        return v + y * 0.1;
    });
});

---

Here's a version that performes smoother: http://jsfiddle.net/BYUdS/3/.

var $elems = $("html, body");
var delta = 0;

$(document).on("mousemove", function(e) {
    var h = $(window).height();
    var y = e.clientY - h / 2;
    delta = y * 0.1;
});

$(window).on("blur mouseleave", function() {
    delta = 0;
});

(function f() {
    if(delta) {
        $elems.scrollTop(function(i, v) {
            return v + delta;
        });
    }
    webkitRequestAnimationFrame(f);
})();

Answer 2

Something similar to this? http://jsfiddle.net/zcVL7/4/

I condensed the JS a little, but you had most of it:

$(document).mousemove(function(e) {
    var percent = e.clientY / $(window).height();
    $('body, html').scrollTop($(document).height() * percent);
});​