11

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

$('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 中的平滑滚动。

4

4 回答 4

7

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

于 2013-07-10T13:50:55.700 回答
1

这些解决方案都没有在 Windows Phone 7 上对我有用。起作用的是删除 animate() 并仅依赖 html 标记上的 scrollTop。希望这可以帮助某人。

这个：

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

代替：

$('html,body').animate({ scrollTop: distance }, 250);
于 2013-07-03T17:02:27.187 回答
1

我在我的 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

于 2016-12-13T18:27:52.057 回答
0

我这样解决了

链接：<a href="#about" data-target="about" class="scroll-to">关于</a>

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

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

        $(".scroll-to").click(function () {
            scrollToElement($(this).data("target"));
        });
于 2013-05-30T00:36:35.443 回答