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/
