jQuery 将滚动条设置为 0 在 Windows Phone 上不起作用

Question

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

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

但如果有一个选项可以在移动 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 子句，但现在我正试图找到一个更好的解决方案，而不是走这条路。

Answer 2

这些解决方案都不适用于 Windows Phone 7。 起作用的是删除 animate() 并仅依靠 html 标签上的 scrollTop 。 希望这对某人有所帮助。

这个：

$('html').scrollTop(distance);

代替：

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

Answer 3

我在 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);

#last-message 是我想要滚动到的 div。感觉有点 hacky，但 Windows Phone 也是如此：P

Answer 4

我是这样解决的

链接： 关于

锚名称#about 使其可以在平滑滚动的设备上运行

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

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