How to stop Androids' Browser from scrolling back
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.
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.
精彩评论