Question

Alright, here’s the site in question: http://abramobile.com

If you scroll down the page past the slider area (or click one of the tabs at the top), you get to the content part. At the point, this “back to top” arrow fades in to the top right corner. I’m using jQuery scrollTop() with a .click() event to take the user back to the top of the page. I’m also using position:fixed; to get the element to stay in the same place as it scrolls.

The problem is in safari that when you click it to go back to the top, it gets all jerky and flashes in and out as the page scrolls up. There’s also a fadeTo(200,0) going on to fade the up arrow back out when you scroll back to the navigation area.

Is there some CSS I can apply that will prevent this jerkyness? If not, is there another way to accomplish what I’m trying to do?

Thanks!

UPDATE: Jerkyness not present in Safari 5.0.5. Could someone verify it in Safari 5.1.x?

Answer 1

To make it work in Opera and Firefox:

$('#toTop').click(function(){
    $('body').stop().animate({
        'scrollTop': 0
    }, 400);
}); 

change $('body') to $('body, html')

It’s not jerky for me in Safari( 5.0.5 )