JQuery 移动 pagecontainertransition 事件未按预期工作

Question

我有一个 jQuery 移动网站，进入后我想跳转到页面上的一个部分：

$(document).on('pagecontainertransition', function(event, ui){
  $(window).scrollTop( $("#mysection").offset().top);   
  console.log("pause");
});

如果我从 Javascript 控制台加载页面和运行 scrolltop 行，它工作正常。

如果我在 console.log("pause"); 行放置一个 Javascript 断点，我会看到屏幕上的页面正是我想要的。页面跳转到我的部分。但是，如果我释放断点，它会跳回到页面顶部。

根据文档和谷歌搜索，我了解到

pagecontainertransition

是最后一个 Jquery 移动事件。

我错过了什么？

Answer 1

试试这个

$(document).on('pagecontainertransition', function(event, ui){  
   $('html, body').animate({
        scrollTop: $("#mysection").offset().top
    }, 1000);
  console.log("pause");
});

Answer 2

jQuery Mobile 提供了一种滚动方法，您可以使用：

https://api.jquerymobile.com/jQuery.mobile.silentScroll/

此外，当加载页面时 jQM 会自动滚动到顶部，因此您可能遇到了时间问题并且需要引入一个小的延迟：

$(document).on('pagecontainertransition', function(event, ui){
    if (ui.toPage.prop("id") == "page2"){
        setTimeout(function(){
            $.mobile.silentScroll( $("#mysection").offset().top); 
        }, 100);
    }
});

DEMO

Answer 3

感谢 Akki619 和 ezanker 让我走上正轨：

我的问题是 jquery 手机在加载后滚动到页面顶部引起的。我不想使用超时（在旧移动设备上可能太短或在台式计算机上太长）。我四处搜索并从 https://forum.jquery.com/topic/jquery-mobile-scroll-to-top-of-page-on-page-load 我得到了一种在 JQM 中覆盖此行为的方法，它满足了我的需要。正如那里给出的那样，我将以下代码添加到我的 javascript:

(function($)
{
  $( document ).on( "mobileinit", function()
  {
    var silentScroll = $.mobile.silentScroll;
    $.mobile.silentScroll = function( ypos )
    {
        if ( $.type( ypos ) !== "number" )
        {
            // FIX : prevent auto scroll to top after page load
            return;
        }
        else
        {
            silentScroll.apply(this, arguments);
        }
    };
});
}
(jQuery));

JQuery 移动 pagecontainertransition 事件未按预期工作

JQuery mobile pagecontainertransition event not working as expected

javascript

jquery

jquery-mobile

jquery-events