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

但最好知道是否有一个选项可以以编程方式禁用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子句，但是现在我正试图找到一个更好的解决方案，而不是走这条路。

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

我这样解决了

链接：＆lt; a href =“＃about”data-target =“about”class =“scroll-to”＆gt;关于＆lt; / a＆gt;

锚名称#about使其适用于具有平滑滚动的设备

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

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

jQuery动画scrolltop到0无法在Windows Phone上运行

4 个答案: