jQuery Mobile - 窗口加载后跳转到顶部

Question

我们为m.swisswebcams.ch 使用jQuery mobile。当我在页面仍在加载时向下滚动时，它似乎总是在页面加载时再次向上跳（即window.onload）。

如何解决这个问题？

---

重现此问题的步骤：

1. 在您的移动浏览器中打开m.swisswebcams.ch
2. 在页面仍在加载时立即向下滚动
3. 等到页面自行跳转到顶部
4. （并不总是会发生。所以有时您可能需要再试一次。）

---

结果

打开网站：

向下滚动：

自动跳到顶部（不需要）：

Answer 1

嗯，这种行为在 jQuery Mobile 中是默认的（actual v. 1.4.5）。来自 jQuery Mobile 源代码：

    // hide iOS browser chrome on load if hideUrlBar is true this is to try and do it as soon as possible
    if ( $.mobile.hideUrlBar ) {
        window.scrollTo( 0, 1 );
    }

这就是之前cmets中引用的silentScroll函数：

....
    // Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
    silentScroll: function( ypos ) {
        if ( $.type( ypos ) !== "number" ) {
            ypos = $.mobile.defaultHomeScroll;
        }

        // prevent scrollstart and scrollstop events
        $.event.special.scrollstart.enabled = false;

        setTimeout(function() {
            window.scrollTo( 0, ypos );
            $.mobile.document.trigger( "silentscroll", { x: 0, y: ypos });
        }, 20 );

        setTimeout(function() {
            $.event.special.scrollstart.enabled = true;
        }, 150 );
    },
...

自 iOS 7 以来，此解决方法不再有效，但它是进入“全屏模式”最需要的功能之一（请参阅 SO 上的很多问题）。

这实际上是参考：iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions? 并详细解释了更新的 iOS 版本。

只是猜测，也许你没有注意到这种行为，因为你有更新的 iOS 版本，或者你不需要全屏，因为你已经在手动滚动了。

您可以通过覆盖 JQM 设置来防止初始滚动顶部：

<script type="text/javascript">
    $(document).bind("mobileinit", function() {
        $.mobile.ajaxEnabled = false;
        $.mobile.hideUrlBar = false; // <---- add this line
    });


    var GLOBAL = {
        language : 'de'
    };
</script>

试试看，如果这能解决您的问题，请告诉我。在我的测试中，它起作用了。

编辑： 这种烦人的行为已在即将发布的 1.5 版 JQM 中得到修复：

参考：jQuery Mobile 1.5.0-alpha1 Changelog

如果用户已经滚动，则修复页面加载以防止静默滚动 (#3958, 0996492)

Answer 2

如评论中所述：此行为是设计使然。有两种请求 URL 的方式：一种是“完整”或“正常”或“非 javascript”请求，例如输入 URL、单击链接或提交表单，另一种方式是后台 ajax 请求，其中 javascript在 html 容器中填充响应。第一种方式总是在页面加载时跳转到页面顶部（恕我直言，在所有浏览器中，除非您通过 F5 刷新已经加载的页面）。

更新

作为网站程序员，您可以自行解决此浏览器行为。只需使用jQuery loader 或jQuery Mobile events 在页面加载时显示一些状态栏或旋转圆圈。