Creating Jquery.ScrollTo works based on speed, not duration

Question

I am creating a horizontal site (it could be any other auto-scrolling site, such as a diagonal) that uses the $ .Localscroll child from the Jquery.ScrollTo plugin.

There is one big problem with this plugin; he calculates the movement depending on the duration. This means that the transition from page 1 to 2 takes 2 seconds, but the transition from page 1 to 10 also takes 2 seconds, which makes the transition so fast that the transition itself is not actually visible. I don’t know how many links there will be, and the links will not be in the same menu, but scattered across the pages.

Is there a way to find out the current scroll position (preferably through the plugin so that it cross-browser) and use a hash (#) to find out the new scroll value and then calculate the duration depending on the speed?

Answer 1

You can get the scrollTop value with $("element").scrollTop() . You can do some calculations and set a timeline on them.

Answer 2

You can tell how many pixels should be moved over the 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(); }); }