Making Jquery.ScrollTo work based on speed instead of duration

Question

I'm creating a horizontal site (it could also be any other auto-scrolling site, like diagonal) which uses the $.Localscroll child from the Jquery.ScrollTo plugin.

There's one big problem with this plugin; it calculates movement based on a duration. This means the transition from page 1 to 2 takes up 2 seconds, but a transition from page 1 to 10 also takes up 2 seconds, making it transition so fast, the transition itself isn't really visible anymore. I don't know how many links there will be and the links won't be in the same menu but scattered accross pages.

Is there a way to find out the current scrollto position (preferably via the plugin so it's cross-browser) and use the hash (#) to find out the new scrollto value, then calculate the duration based on speed?

Answer 1

You can get the scrollTop value with $("element").scrollTop() . You could do some calculation and set the timelength based on that.

Answer 2

You can say how many pixels should be moved in a duration. In this case 50px/10ms.

eg.:

var scrollOffset = root.scrollTop,
    offset       = element.offsetTop,
    speed        = 50;

function scrollLoop() {

  if (offset >= scrollOffset) {
  return;
  }

  scrollOffset -= speed;

  root.animate({ scrollTop: scrollOffset }, 10, function() {
    scrollLoop();
  });
}