Question

我正在开发一个jquery-mobile应用程序并遇到了一些问题;我想使用jquery的animate（）来轻轻滚动我应用程序页面的“返回顶部”。

以下代码段在除我的一个测试浏览器之外的所有版本中都很有用。 Chrome＆amp;台式机上的Firefox，iPhone上的Safari和Android上的Firefox Beta都很不错。当动画完成时，默认的Android浏览器（webkit-mobile IIRC）会滚动回锚点。

$("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);
    });
});

有人可以建议a）导致Android浏览器向后滚动的原因和/或b）建议解决方法吗？如果它有所作为，我正在测试的设备正在运行Android 2.3.2。

Answer 1

通过阅读不相关问题的文档，我偶然发现了$.mobile.silentScroll()方法 - 显然是针对这种情况设计的。

这是我最初的脑死亡解决方法：

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;
});

仍然很好奇为什么Android浏览器想要以原始形式滚动回锚点。

如何阻止Android'浏览器向后滚动

1 个答案: