How to stop Androids' Browser from scrolling back

Question

I'm working on a jquery-mobile app and have run into a bit of an issue; I'd like to use jquery's animate() for a gentle scroll "back to top" of my app's pages.

The following code snippet works great in all but one of my test browsers. Chrome & Firefox on desktop, Safari on iPhone, and Firefox Beta on Android are all good. The default Android Browser (webkit-mobile IIRC) scrolls back to the anchor when the animation is complete.

$("a[href='#top']").live('click', function() {
    $("body").animate({ scrollTop: 0 }, "slow", function() {
        // anim complete
        setTimeout(function() { // not needed, attempt to brute-force
          window.scrollTo(0,0);
          alert('foo'); // <- Android scrolls back to anchor after showing alert
        }, 50);
    });
});

Can anyone suggest a) what's causing the Android Browser to scroll back and/or b) suggest a workaround? If it makes a difference the device I'm testing with at the moment is running Android 2.3.2.

Answer 1

Reading through the documentation on an unrelated issue, I stumbled upon the $.mobile.silentScroll() method - designed apparently for just this situation.

Here's my initial brain-dead workaround:

function scrollToTop() {
    var scrollPos = $(document).scrollTop();
    scrollPos -= 60;
    if (scrollPos < 1) { scrollPos = 1; }
    $.mobile.silentScroll(scrollPos);
    if (scrollPos > 1) { setTimeout(scrollToTop, 60); }
}

$("a[href='#top']").live('vclick', function() {
    scrollToTop();
    return false;
});

Still curious as to why Android Browser wants to scroll back to the anchor in the original form.