滾動到頂部不在Jquery Mobile中工作

用戶向下滾動到頁面底部後，導航返回到頁面頂部不起作用。滾動到頂部不在Jquery Mobile中工作

頁腳

<div data-role="footer" data-theme="b"> 
    <div class="ui-bar"> 
     <a href="" data-role="button" data-icon="arrow-u" data-theme="d" style="float:right;" class="returnTopAction">Return top</a> 
    </div> 
</div>

jQuery的參考

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

UPDATE： 我完整的HTML代碼

<html> 

    <head> 
     <title>SQ/TR</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
    </head> 

    <body> 
     <div data-role="page" id="arealistpage"> 
      <div data-role="header" data-theme="b"> 
       <h1>SQ/TR</h1> 

       <a href="../Default.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l'>Back</a> 
      </div> 
      <!-- /header --> 
      <div data-role="content"> 
       <ul data-filter="true" data-inset="true" data-role="listview"> 
        <li> 
         <a href="#">Design Squad Check</a> 
        </li> 
        <li> 
         <a href="#">Vendor Squad Check</a> 
        </li> 
        <li> 
         <a href="#">Business Squad Check</a> 
        </li> 
        <li> 
         <a href="#">Management Squad Check</a> 
        </li> 
        <li> 
         <a href="#">Design Transmittal</a> 
        </li> 
        <li> 
         <a href="#">Vendor Transmittal</a> 
        </li> 
        <li> 
         <a href="#">Business Transmittal</a> 
        </li> 
        <li> 
         <a href="#">Management Transmittal</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /content --> 
      <div data-role="footer" data-theme="b" id="footerNavBar"> 
       <div class="ui-bar"> 
        <a href="" data-role="button" data-icon="arrow-u" data-theme="d" style="float:right;" class="returnTopAction">Return top</a> 
       </div> 
      </div> 
     </div> 
     <!-- /page --> 
    </body> 

</html>

來源

2013-03-02 chamara

什麼是您的JavaScript代碼？ – Derek 2013-03-02 06:47:56

我已更新代碼 – chamara 2013-03-02 06:58:45

有jQuery中移動的jQuery.mobile.silentScroll()方法，其滾動到一個特定的Y位置，而不會觸發滾動事件偵聽器。此方法不執行動畫滾動。

示例使用jQuery Mobile的silentScroll：

<html> 

    <head> 
     <title>SQ/TR</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
     <script> 
      $(document).on('click', '.returnTopAction', function() { 
       $.mobile.silentScroll(0); 
      }); 
     </script> 
    </head> 

    <body> 
     <div data-role="page" id="arealistpage"> 
      <div data-role="header" data-theme="b"> 
       <h1>SQ/TR</h1> 

       <a href="../Default.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l'>Back</a> 
      </div> 
      <!-- /header --> 
      <div data-role="content"> 
       <ul data-filter="true" data-inset="true" data-role="listview"> 
        <li> 
         <a href="#">Design Squad Check</a> 
        </li> 
        <li> 
         <a href="#">Vendor Squad Check</a> 
        </li> 
        <li> 
         <a href="#">Business Squad Check</a> 
        </li> 
        <li> 
         <a href="#">Management Squad Check</a> 
        </li> 
        <li> 
         <a href="#">Design Transmittal</a> 
        </li> 
        <li> 
         <a href="#">Vendor Transmittal</a> 
        </li> 
        <li> 
         <a href="#">Business Transmittal</a> 
        </li> 
        <li> 
         <a href="#">Management Transmittal</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /content --> 
      <div data-role="footer" data-theme="b" id="footerNavBar"> 
       <div class="ui-bar"> 
        <a href="" data-role="button" data-icon="arrow-u" data-theme="d" style="float:right;" class="returnTopAction">Return top</a> 
       </div> 
      </div> 
     </div> 
     <!-- /page --> 
    </body> 

</html>

此外，你可以使用下面的腳本執行動畫滾動：

$(document).on('click', '.returnTopAction', function() { 
    $('html, body').animate({scrollTop: $("#arealistpage").offset().top}, 1000); 
});

您可以檢查它是基於你的代碼下面的例子：

<html> 

    <head> 
     <title>SQ/TR</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
     <script> 
      $(document).on('click', '.returnTopAction', function() { 
       $('html, body').animate({scrollTop: $("#arealistpage").offset().top}, 1000); 
      }); 
     </script> 
    </head> 

    <body> 
     <div data-role="page" id="arealistpage"> 
      <div data-role="header" data-theme="b"> 
       <h1>SQ/TR</h1> 

       <a href="../Default.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l'>Back</a> 
      </div> 
      <!-- /header --> 
      <div data-role="content"> 
       <ul data-filter="true" data-inset="true" data-role="listview"> 
        <li> 
         <a href="#">Design Squad Check</a> 
        </li> 
        <li> 
         <a href="#">Vendor Squad Check</a> 
        </li> 
        <li> 
         <a href="#">Business Squad Check</a> 
        </li> 
        <li> 
         <a href="#">Management Squad Check</a> 
        </li> 
        <li> 
         <a href="#">Design Transmittal</a> 
        </li> 
        <li> 
         <a href="#">Vendor Transmittal</a> 
        </li> 
        <li> 
         <a href="#">Business Transmittal</a> 
        </li> 
        <li> 
         <a href="#">Management Transmittal</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /content --> 
      <div data-role="footer" data-theme="b" id="footerNavBar"> 
       <div class="ui-bar"> 
        <a href="" data-role="button" data-icon="arrow-u" data-theme="d" style="float:right;" class="returnTopAction">Return top</a> 
       </div> 
      </div> 
     </div> 
     <!-- /page --> 
    </body> 

</html>

來源

2013-03-02 07:37:22

綁定一個上點擊事件的按鈕，並使用jquery anmiate滾動到頂部滑動效果。

HTML

<a data-role="button" data-icon="arrow-u" data-theme="d" style="float:right;" class="returnTopAction">Return top</a>

的JavaScript

<script type="text/javascript"> 
    $(document).on('click', ".returnTopAction", function() 
    { 
     $("body").animate({"scrollTop": 0}); 
    }); 
</script>

來源

2013-03-02 07:03:16 Derek

嗨！感謝你的回答。滾動時，jquery mobile具有滑動效果。有沒有什麼辦法可以讓滑動效果在這裏？ – chamara 2013-03-02 07:10:27

更新上面的答案，檢查它。 – Derek 2013-03-02 07:19:21

只需要提到$（document）.ready（）函數不應該用在jQuery Mobile中。原因在於，當您導航時，使用Ajax將每個頁面的內容加載到DOM中，並且DOM就緒處理程序僅對第一頁執行。 – 2013-03-02 07:45:13

滾動到頂部不在Jquery Mobile中工作

回答

相關問題