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

我已经写了一个网站，它有一个功能，滚动到页面顶部的用户视图。问题是：

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

这在所有桌面浏览器上都能正常工作，但在Windows Phone上，它只会向上滚动180像素，然后停止。我已尝试将该功能替换为：

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

它在桌面上捕捉到顶部，但在手机上滚动到顶部。我相信这需要InternetExplorerMobile来尝试平滑地设置滚动动画，这就是问题的根源。如果是这种情况（或者如果不是，有人可以纠正我），我如何重写此函数以使动画工作

编辑

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

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

但是，如果知道是否有一个选项可以通过编程方式禁用移动IE中的平滑滚动，那就太好了。

我就是这样解决的

链接：

锚定名称#about使其在平滑滚动的设备上工作

        function scrollToElement(elementId) {
            var top = $("#" + elementId).offset().top;
            $('html,body').animate({ scrollTop: top }, 250);
        }

        $(".scroll-to").click(function () {
            scrollToElement($(this).data("target"));
        });

---

这些解决方案在WindowsPhone7上都不适用于我。 所做的工作是删除animate（）并简单地依赖html标记上的scrollTop。 希望这对别人有帮助

这：

而不是：

$('html,body').animate({ scrollTop: distance }, 250);

---

在WindowsPhone8上，我遇到了同样的问题。我目前正在做下面的破解，它会等待动画“完成”，然后执行一个标准的window.scroll以确保它被滚动到正确的位置

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条款，但现在我正试图找到一个更好的解决方案，而不是走这条路

我在Windows Phone 8上遇到了同样的问题。在我的情况下，我需要滚动窗口的底部，但在手机上它就是无法工作

最后，我使用了@topherg和@LocalPCGuy解决方案的组合，稍微有点变化，以使屏幕显示在底部

这是我的代码，以防它帮助其他人：

$("html, body").stop().animate({
    scrollTop: $("#last-message").offset().top
}, 2000, 'swing', function () {
    $("html, body").scrollTop($("#last-message").offset().top);
});

setTimeout(function () {
    window.scrollTo(0, document.body.scrollHeight);
}, 2075);

---

其中#最后一条消息是我要滚动到的div。感觉有点黑，但Windows Phone也一样：P

真的没什么区别。我在一个测试页面上实现了这一点，但它只会运行一小段距离，然后停止是的，这与我最后所做的类似。除了在

.animate

之外调用

设置超时

之外，它是

.animate

中完整回调参数的一部分。似乎工作正常，但是的，这是恼人的延迟后。一个设备发现程序（服务器端）最好包含一个不同的脚本，只要所有窗口动画都在一个独立的scriptYah中处理，因为某些原因，它不会在模拟器的回调中工作。本周结束前应该有一部真正的W8手机，看看这是否会有所不同。有时，我发现动画开始，然后在某个点停止。我认为这是因为当它向上滚动时，它被打断了，所以它只是停止。它可能需要一个脚本来确定您当前所在位置和将要到达的位置之间的像素数，然后如果可以计算速率（不应该花费太长时间），则可以确定WP滚动的时间。然后，通过一点填充（比方说5ms），就可以调用

scrollTo（0）

。我将有一个小剧本。享受你的新手机哈哈…我对我的Android非常满意，新手机是为我们的QA实验室设计的。我可能会考虑编写我自己的动画功能，它使用递归调用和setTimeout组合，使用window.scrollTo为滚动设置动画。应该在几乎所有地方都能工作，并提供相同的体验，而且不要认为需要那么长时间，这是一个相对简单的递归函数。我发现，在windows mobile上，最容易检测浏览器，只需调用window.scroll（0,0）；浏览器将为您设置滚动动画。虽然这确实很有效，但它确实会产生一个不幸的副作用，即在不自己制作动画的设备（如桌面上的Chrome）上删除任何漂亮的动画

$("html, body").stop().animate({
    scrollTop: $("#last-message").offset().top
}, 2000, 'swing', function () {
    $("html, body").scrollTop($("#last-message").offset().top);
});

setTimeout(function () {
    window.scrollTo(0, document.body.scrollHeight);
}, 2075);