jQuery 动画滚动顶部到 0 无法在 Windows Phone 上工作

Question

我编写了一个网站，该网站具有将用户 View 滚动到页面顶部的功能。有问题的调用是:

$('html,body').animate({scrollTop:0}, 150, 'swing');

这在所有桌面浏览器上都可以正常工作，但在 Windows Phone 上，它只会将用户向上滚动大约 180 像素，然后停止。我尝试用以下内容替换该函数:

$('html,body').scrollTop(0);

在桌面上它会吸附到顶部，但在手机上它会滚动到顶部。我认为 Internet Explorer Mobile 需要尝试平滑地设置滚动动画，从而导致了该问题。如果是这种情况(或者如果不是，有人可以纠正我)，我如何重写此函数以使动画正常工作？

编辑

虽然它并不理想，但它似乎在有限的容量下工作，我已用以下内容替换了滚动代码:

$('html,body').animate({scrollTop:0}, 150, 'swing', function() {
    $('html,body').scrollTop(0);
});

但最好知道是否有一个选项可以以编程方式禁用 Mobile IE 中的平滑滚动。

Answer 1

在 Windows Phone 8 上，我遇到了同样的问题。我目前正在执行以下 hack，它会等待动画“完成”，然后执行标准 window.scrollTo 以确保它滚动到正确的位置。

scrollHmtlBody: function (scrollToTarget, duration) {
    $('html, body').animate({ scrollTop: scrollToTarget }, duration);

    // Windows Phone doesn't animate properly, 
    // this makes sure it scrolls to the appropriate position (eventually)
    setTimeout(function() { 
        window.scrollTo(0, scrollToTarget);
    }, duration + 75);
}

我对结果并不满意 - 它有效，但由于 75 毫秒的延迟，它在“完成”滚动动画之前有一个犹豫。由于延迟较少，Windows Phone 显然拒绝执行scrollTo 操作(也许它认为当前正在“滚动”？)

我可能最终会诉诸 if/else 子句来进行设备检测，但现在我正在尝试寻找更好的解决方案，而不是走这条路。