Javascript 在JQuery Mobile中显示页面时如何滚动到锚定

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

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

我怎样才能做到这一点？我可以这样做以提供具有特定id的特殊URL吗

请注意：我只需要一个URL，因为我将在某个客户端中向我的用户发布此URL，该URL应确定要显示的部分

我使用以下命令打开我的html文件：

E:path\..\rule.html#zhuaguirule

。这不适用于滚动到所需的零件，但当我再次从浏览器中按enter键时，它就起作用了。我不知道为什么会发生这种情况，也不知道如何解决

<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>

第一部分







第二部分


..

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

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

jquerymobile=1.4 替换

• pagechange

  与

  pagecontainershow

  或

  pagecontainertransition

• $.mobile.activePage

  带有

  $.mobile.pageContainer.pageContainer（“getActivePage”）
  

演示：

---

@奥马尔，谢谢你！但解决方案并不完全是我想要的，我只需要一个URL，它将提供给jquery mobile之外的用户。那么，我有办法做到这一点吗？你的意思是你想在URL中检索哈希？不是，哈希，我只是想要一些东西，比如：http…..html#parts_id，但当我在pc浏览器中输入它并键入enter时，这不起作用。但当我再次输入enter时，它会工作。我仍然无法理解您的问题。你到底想要实现什么？基于url中的散列显示/隐藏div？谢谢！我将您的第一部分复制到我的代码中。。。。。但同样，我不知道我是否应该为此改变任何东西？我是新手jquery@Jaskey如果使用单页模型（每个页面位于不同的文件中），则需要将其加载到目标页面的

标题

或

正文

。但是在这种情况下，您需要将

pagechange

绑定到特定页面。对于

pagecontainershow

，您必须检查事件是否在目标页面而不是其他页面上发出。我将我的更改为头部。现在它正在工作。请您解释一下为什么我们应该重写函数以使锚工作，因为锚应该在html中没有任何js的情况下工作，所以我可以接受您的答案。非常感谢。

$(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;
    }
});

$(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);
    }
});