javascript - 在 JQuery Mobile 中显示页面时如何滚动到 anchor

Question

我正在使用 Jquery Mobile，我有一个包含两个(或更多)部分的大页面。

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

我怎样才能做到这一点？我可以通过这样做来提供具有某些特定 ID 的特殊 URL 吗？

请注意:我只需要一个 URL，因为我会在某些客户端中将此 URL 发布给我的用户，而 url 应该决定要显示的部分。

我使用以下命令打开我的 html 文件:E:path\....\rule.html#zhuaguirule。这无法滚动到所需的部分，但是当我从浏览器中再次按下回车键时，它会起作用。我不知道为什么会这样，也不知道如何解决。

<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 手机 <= 1.3

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

1. 覆盖$.mobile.defaultHomeScroll；默认情况下它返回 0。从 window.location 中检索 hash，找到目标 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

2. 如果您想要动画，请使用 .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 移动 >= 1.4

替换

• pagechange 使用 pagecontainershow 或 pagecontainertransition。

• $.mobile.activePage 和 $.mobile.pageContainer.pagecontainer("getActivePage");。

Demo: Solution 1 - Solution 2