在jQuery移动页面显示无声滚动之后，页面跳至顶部 [英] after jQuery mobile pageShow silentscroll, page jumps to top

问题描述

我们有一个购物篮页面，上面有产品，然后是运输方法.这是一个jQuery mobile网站.

We have a basket page, where there are the products, and then the shipping methods. This is a jQuery mobile site.

我想达到的目标是，如果选择了一种运送方法，那么如果重新加载页面，jQuery mobile会跳转到该运送方法的div.

What I want to achive, that if a shipping method selected, then if there is a page reload, jQuery mobile jumps to a div to the shipping methods.

这是代码，它滚动到送货方式.这是一个内联脚本.

Here is the code, what scrolls to the shipping methods. This is an inline script.

$(document).on("pageshow", function (e, ui) {
    $.mobile.silentScroll($('#kosar').offset().top);
});

预期结果:刷新页面后，窗口滚动到#kosar div.

Expected result: on page refresh, the window scroll to the #kosar div.

当前结果:页面滚动到#kosar div，但立即滚动到页面顶部.

Current result: page scrolls to the #kosar div, but immediatly scroll to the top of the page.

我们发现的结果，如果silentScroll之后发生某些错误，则该窗口不会跳回到页面顶部.看来，在pageshow滚动到后退时有些东西，但我们不知道是什么.

What we discovered, if some error is occures after the silentScroll, the window is not jump back to the top of the page. So it seems, something after the pageshow scrolls it to back, but we do not know, what.

例如:

$(document).on("pageshow", function (e, ui) {
    $.mobile.silentScroll($('#kosar').offset().top);
    undefined_function(); //This function is not exists
});

以下是无效的和有效的"示例:

Here are the non working, and "working" examples:

这是一个实时示例. ，您将看到一秒钟的红色大文字，然后立即将您带到页面顶部.

Here is a live example. When you refresh the page, you will see for a second the big red text, and immediatly after that you will be taken to the top of the page.

这里是有错误的示例.

Here is the example with error.

我已经在FF Developer Edition中对其进行了测试.使用Chrome，您需要将浏览器的大小调整为更小一点，并刷新一些时间以查看滚动条如何上下移动.

I've tested it in FF Developer Edition. With Chrome, you need to resize your browser to a littlebit smaller, and refresh some times to see the scrollbar how jumping to bottom and up.

如何防止这种烦人的滚动到顶部?

How can I prevent this annoying scroll to top?

推荐答案

我认为，这是jQuery mobile js中的错误，我已经向他们报告了.

I think, this is a bug in the jQuery mobile js, I've reported it to them.

最后我想通了.

版本: http://ajax.googleapis.com/ajax /libs/jquerymobile/1.4.5/jquery.mobile.min.js

我已经在jQuery mobile js silentScroll定义中创建了一个断点，并且我已经看到了，由于某种原因，它运行了两次.首先是个好电话，ypos是一个数字，我想在其中跳，这就是为什么它跳到正确的地方.

I've made a breakpoint in the jQuery mobile js silentScroll definition, and what I've see, for some reason it run twice. The first is a good call, ypos is a number, where I want to jump, this is why it jump to the right place.

但是，稍后，在15432行中，以下是这些代码行，它们在准备就绪的文档上运行:

But, later, at line 15432 here are these lines of codes, what is running on document ready:

// window load event
// hide iOS browser chrome on load if hideUrlBar is true this is as fall back incase we were too early before
if ( $.mobile.hideUrlBar ) {
    $window.load( $.mobile.silentScroll );
}

当发生这种情况时，在第二次调用时，silentScroll的ypos将是一个对象，而不是函数期望的数字，如果不是数字，则jQuery mobile设置ypos如果您不进行修改，则$.mobile.defaultHomeScroll实际上是1.这就是为什么它跳回首页的原因.

And when it's happens, on the second call, the ypos for silentScroll will be an object, not a number, as the function expects, and if it not a number, then jQuery mobile set the ypos to $.mobile.defaultHomeScroll what is actually 1 if you do not modified. This is why it jumps back to home.

警告:如果您认为，只需将$.mobile.hideUrlBar设置为false，就错了.我已经尝试过了，但是它有副作用，因为在15416行中还有该变量的另一个引用，并且如果您将其关闭，那么当您从页面转到另一个页面时，您将不会重定向到第二个页面的顶部.页面.

Warning: If you think, you just need to set the $.mobile.hideUrlBar to false, you are wrong. I've tried it, but it had side effects, because in line 15416 there are another reference for this variable, and if you turn off, then when you go from a page to another, you wont be redirected to the top of your second page.

所以解决方案是对此$window.load( $.mobile.silentScroll );进行注释，现在一切正常.

So the solution was to comment out this $window.load( $.mobile.silentScroll ); and now everything is working as I expected.

这篇关于在jQuery移动页面显示无声滚动之后，页面跳至顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！