chadpeppers chadpeppers - 1 year ago 153
Javascript Question

jQuery smooth scroll on mousedown

Is there any way to emulate a scroll type option using jquery animate? Right now it simply scrolls equivalent to the value you give it (like below). I cannot do a custom scroll bar on this div because its mainly geared towards making it easy to scroll on mobile devices. So the example below will scroll buy it goes -100px from the top, but then stops, and repeats. Is there any easy way to make this a transition that it will just continue.

var height = jQuery("#technology_list").height();
scrolling = true;
startScrolling(jQuery("#technology_list"), "-=100px");
//jQuery("#technology_list").animate({top: '-=25'});
scrolling = false;

function startScrolling(obj, param)
obj.animate({"top": param}, "fast", function(){
if (scrolling)
startScrolling(obj, param);

Answer Source

jsFiddle showing it in action

Simplest answer would be that you want to make sure you set your animate to have easing set to linear.

.animate( { /* whats animating */ } , duration: 'XXX', easing: 'linear'
   ,function () { /* callback */ } 

Strangely enough, when easing is left out of animate() its default actually isn't linear (which basically turns it off). The default is a standard easing, which eliminates that "smoothness", one speed through out the entire animation that we'd want here.

Here's an example so you can see it:

var end = 20;

for (i = 0; i < end; i++) {
  $('#test').animate({'top': '+=50px'}, 500, 'linear', function () {
      // callback


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download