Optimizing Jquery animations

Question

So I am on a hunt to try and figure out the best ways of optimizing the Jquery .animate(scrollTo:value) function. Take this example:

$('#returnToTop').on('click', function(){
        $('html, body').animate({
            scrollTop: 0
        }, 'slow');
    });

Here you have a div which acts as a "Top" button that when clicked, scrolls the page back to the top. Now on complicated pages, this is rather jerky and not smooth. I was wondering if any jQuery ninjas could enlighten us as to what exactly the animate function does. On simple pages, it's nice and smooth.

Now, I assume that it probably does some calculations that walks down the DOM, so when it's complicated, it takes a while and looks jumpy. So here's the heart of the matter:

are there any steps we can take, as developers to provide jQuery with the precise parameters that would make it's calculations simpler, therefore making the animation smoother. There are probably specific values that are important that if provided, would provide a significant speedup.

Does anyone have any insight?

Thanks.

user400654 · Accepted Answer · 2012-07-09 21:35:16Z

4

To jQuery, "slow" is an amount of time (600ms to be precise). If it is a big page, it needs to be jumpy to go to the top in 600ms.

If you want to make this animation with a constant speed independent of page height, set the duration to t = offsetTop / k to walk aproximatelly k pixels per second, where offsetTop is something like $(clickedElement).offset().top.

jQuery also has some plugins to do it in a straight way.

edited Jul 9, 2012 at 21:35

user400654

95.1k16 gold badges168 silver badges188 bronze badges

answered Jul 9, 2012 at 21:30

iurisilvio

5,0091 gold badge32 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gabaum10 Over a year ago

This actually was far smoother, but due to the complexity of my page, it seems that it's still a bit jerky. I was hoping someone could enlighten us a bit of the inner workings of the animate function to try to isolate what is causing the rendering slowdown. If we don't get any more responses, I will mark this as correct.

iurisilvio Over a year ago

You can try some javascript/css profiling (with Chrome Developer Tools for example) to see what is slowing down your code.

Collectives™ on Stack Overflow

Optimizing Jquery animations

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related