How to scroll a div up and down using/via a draggable object

How to scroll a div up and down using/via a draggable object

What i want to do is to control / scroll a div up and down and its
movement depends on the dragged object. This drag object is of type
draggable in jQuery.
e.g. When i drag the object upwards, the div scrolls up and vice versa.
dragged object is the joystick
$("#joystick").draggable({
revert: true,
containment: "parent",
create: function(){
$(this).data("startLeft",parseInt($(this).css("left")));
$(this).data("startTop",parseInt($(this).css("top")));
},
start: function() {
animating = true;
},
drag: function(event,ui){
var rel_left = ui.position.left -
parseInt($(this).data("startLeft"));
var rel_top = ui.position.top -
parseInt($(this).data("startTop"));
animate(rel_top)
},
stop: function(){
animating = false;
},
axis : "y"
});
animate function
var animate = function(r){
$("#timeline").stop().animate({ scrollTop : r },2000,function(){
if( animating ){
animate(r);
}
})
}
also, this div is scrolled down onload
$("#timeline").animate({ scrollTop: $('#timeline')[0].scrollHeight}, 2000);
example here : http://jsfiddle.net/wq4Lg/