Question

在启用了多页ajax的移动应用程序中找不到在pageContainer更改事件后使用锚位置的方法后，我试图调查是否可以在该事件之后静默滚动到特定的div元素，但没有成功。< / p>

代码是：

$("#myPage").html('<div id="mydiv">Hello</div>');
$.mobile.pageContainer.pagecontainer("change", "#myPage");
$('html,body').animate({
            scrollTop: $('#mydiv').offset().top}, 'slow');

$（'＃mydiv'）。offset（）。top始终为0！

即使我定义了这个事件：

$(document).on('pagecontainershow', function(e, ui) {
    var pageId = $('body').pagecontainer('getActivePage').prop('id');

    if (pageId == 'myPage')
    {
       $('html,body').animate({
                scrollTop: $('#mydiv').offset().top}, 'slow');
    }
});

不会触发滚动。

基本上我需要更改页面的html，将页面更改为此页面并滚动到动态创建的特定div。

感谢您的建议

Answer 1

我刚遇到同样的问题。我无法相信这样做有多复杂。问题是，在您调用animate()的上下文中，您的div #mydiv未显示，因此offset()为0.这应该由您on()修复，但是您必须确保在更改页面之前声明它。我相信（截至jQM 1.4）只有body可以是documentation中提到的.selector。

以下适用于我：

$("body").on("pagecontainershow", function(event, ui) { if($.mobile.activePage.attr('id') == "myNewPage" && ui.prevPage[0].id == "myOldPage") $("html,body").animate({scrollTop: $("#mydiv").offset().top}, 0); }); $("body").pagecontainer("change", "#myNewPage");

如果show事件只应处理一次，您可以查看one()。

编辑：根据以上代码制作plunker。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> <script> $(document).on("pagebeforeshow", function(){ $("#click_me").click(function (e) { $("body").on("pagecontainershow", function(event, ui) { if($.mobile.activePage.attr('id') == "two" && ui.prevPage[0].id == "one") $("html,body").animate({scrollTop: $("#after_hello").offset().top}, 500); }); $('body').pagecontainer('change', '#two'); }); }); </script>

总结的HTML：

<div id="one" data-role="page"> <div data-role="main"> <button id="click_me">Click to change and scroll</button> </div> </div> <div id="two" data-role="page"> <div data-role="main"> <div>...</div> <h1>Hello!</h1> <div id="after_hello">...</div> </div> </div>

编辑2：OP提供了一个只需要一次更改即可工作的插件。这是modified version。我将动画选择器从$("html,body")更改为$("#maintesto")。由于固定标题，可能需要这样做。我还添加了更多“lorem ipsum”内容，以便在我的大屏幕上看到效果。

jquery mobile 1.4.2在pageContainer更改后滚动到div

1 个答案: