Question

我正在使用Jquery Mobile，我有一个由两个（或更多）部分组成的大页面。

我希望在某些情况下显示我的页面时让用户查看第二部分。

我怎样才能实现这一目标？我可以这样做以提供具有特定ID的特殊URL吗？

请注意：我只需要一个网址，因为我会在某个客户端将此网址发布给我的用户，并且该网址应确定要显示的部分。

我使用：E:path\....\rule.html#zhuaguirule打开我的html文件。这不适用于滚动到所需的部分，但是当我再次从浏览器中输入时，它可以正常工作。我不知道为什么会这样或者如何解决这个问题。

<div data-role="page" id="rule">
    <div data-role="content" id="wodirule">  <!--this is one part-->
     <h2>PART1</h2>
        <ul data-role="listview" data-inset="true">
            <li>....</li>
            <li>....</li>
        </ul>
     </div>  
     <br><br>    

    <div data-role="content" id="zhuaguirule"><!--this is the other part-->
    <h2>PART2</h2>  
            <ul data-role="listview" data-inset="true">
                <li>....</li>
                <li>....</li>                   
            </ul>
            <ul data-role="listview" data-inset="true"> 
                <li>...</li>
                <li>...</li>
            </ul>

    </div>

   <div data-role="footer" data-position="fixed">
      <div data-role="navbar">
        <ul>
            <li><a href="1.html" data-icon="home">....</a></li>
            <li><a href="2.html" data-icon="home">....</a></li>
        </ul>
      </div>
   </div>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

Answer 1

jQuery Mobile在加载页面或在页面之间切换时的默认行为是它滚动/跳转到顶部。这实际上是对移动浏览器的修复，其中地址栏隐藏了标题的一部分。

以下解决方案通过在页面完全显示时滚动到目标div来覆盖jQuery Mobile的默认行为。

jQuery Mobile＆lt; = 1.3

你有两个解决方案。在pagechange事件中使用它们。

覆盖$.mobile.defaultHomeScroll;默认情况下，它返回0。从hash检索window.location，找到目标div的.offset().top，然后滚动到它。

$(document).on("pagechange", function () {
    var section = location.hash ? location.hash : null;
    if (section != null) {
        var activePage = $.mobile.activePage;
        $.mobile.defaultHomeScroll = activePage.find(section).offset().top;
    }
});

<强> Demo

如果您想要动画，请使用.animate()代替覆盖$.mobile.defaultHomeScroll。

$(document).on("pagechange", function () {
    var section = location.hash,
        activePage = $.mobile.activePage;
    if (section) {
        var scrollTo = activePage.find(section).offset().top;
        setTimeout(function () {
            $("body").animate({
                scrollTop: scrollTo
            }, 500, function () {
                subPage = null;
            });
        }, 500);
    }
});

<强> Demo

jQuery Mobile＆gt; = 1.4

替换

pagechange与pagecontainershow或pagecontainertransition。
$.mobile.activePage与$.mobile.pageContainer.pagecontainer("getActivePage");。

演示：Solution 1 - Solution 2

如何在JQuery Mobile中显示页面时滚动到Anchor

1 个答案:

jQuery Mobile＆lt; = 1.3

jQuery Mobile＆gt; = 1.4