在jQuery Mobile中打開菜單面板時，頁面會回滾到頂部
[英]Page scrolls back to top when the menu panel is opened in jQuery Mobile
問題描述
我檢查了jQuery移動API文檔和GitHub問題，但我找不到我的問題的答案。
我用最新版本的jQuery Mobile創建了一個Web應用程序。 菜單是側面板，單擊標題中的鏈接時會打開該面板。 標題固定在頁面頂部。
在iOS 7上的Safari和Chrome中，當我向下滾動頁面然后打開側面板以獲取菜單時，頁面會滾動回到頂部。
是否有任何方法可以讓面板打開而不會將頁面滾動回頂部？
非常感謝您的幫助！
這是我使用的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Sentinelle</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.0.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
</head>
<body>
<div data-role="page" class="jqm-demos jqm-home">
<div data-role="header" class="jqm-header" data-position="fixed">
<h2><img src="_assets/img/jquery-logo.png" alt="Logo"></h2>
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
</div><!-- /header -->
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
<li data-filtertext="accueil" data-icon="home"><a href="index.html">Home</a></li>
<li data-filtertext="questionnaire" data-icon="bullets"><a href="questionnaire.html" data-ajax="false">1</a></li>
<li data-filtertext="historique" data-icon="clock"><a href="historique.html" data-ajax="false">2</a></li>
<li data-filtertext="rapport" data-icon="mail"><a href="rapport.html" data-ajax="false">3</a></li>
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
<h3>4</h3>
<ul>
<li data-filtertext="about sentinel" data-icon="info"><a href="about_sentinel.html" data-ajax="false">5a</a></li>
<li data-filtertext="about sentient" data-icon="info"><a href="about_sentient.html" data-ajax="false">5b</a></li>
</ul>
</li>
<li data-filtertext="conditions" data-icon="alert"><a href="conditions.html" data-ajax="false">6</a></li>
<li data-filtertext="conditions" data-icon="edit"><a href="mailto:contact@example.com" data-ajax="false">7</a></li>
<li data-filtertext="conditions" data-icon="comment"><a href="AppStore" data-ajax="false">8</a></li>
</ul>
</div>
<!-- /panel -->
<div role="main" class="ui-content jqm-content">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
<p>Test</p>
<p>Under</p>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
2 個解決方案
解決方案1
2 已采納 2014-01-01 17:51:57
這是未來谷歌的解決方案：
打開面板的鏈接應該是：
<a href="#mypanel" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
將面板的div設置為：
<div data-role="panel" id="mypanel" class="jqm-navmenu-panel" data-position-fixed="true" data-position="left" data-display="overlay" data-theme="a" style="overflow:scroll; position: fixed;" data-animate="true">
解決方案2
0 2013-12-30 14:09:58
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
a href =“＃”將始終排在最前面，你必須改變它。
在移動Safari中使用“后退”按鈕關閉模式時，頁面滾動到頂部
[英]Page scrolls to top when closing modal using back button in mobile Safari
jQuery mobile-打開側面板時僅允許垂直滾動嗎？
[英]jQuery mobile - allow only vertical scrolling when side panel is opened?
想要在加載后滾動到某個位置，但是在短暫停留后會自動滾動回到頂部（JQUERY，JQUERY-MOBILE）
[英]Want to Scroll to a position after loading but after a short stint it automatically scrolls back to the top (JQUERY,JQUERY-MOBILE)
在移動瀏覽器中打開時，HTML頁面頂部的文件名和圖標會震動嗎？
[英]Filename and the icons in the top of a html page shriks when opened in mobile browser?
當用戶滾動回到頁面頂部時，如何使徽標效果恢復為“正常”？
[英]How to make logo effect revert back to “normal” when user scrolls back to the top of the page?
當移動菜單打開時，我設法禁用了身體滾動，但是當我打開移動菜單時，桌面/正文頁面總是回到頂部
[英]I manage to disable scroll on body when menu mobile is open , but desktop / body page always going back to the top when i open menu mobile
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
jQuery Mobile返回按鈕滾動到頂部
當模態打開時，頁面滾動到頂部問題
在移動Safari中使用“后退”按鈕關閉模式時，頁面滾動到頂部
Slider 滑動時頁面滾動到頂部（僅限移動端）
jQuery mobile-打開側面板時僅允許垂直滾動嗎？
想要在加載后滾動到某個位置，但是在短暫停留后會自動滾動回到頂部（JQUERY，JQUERY-MOBILE）
合並后，頁面滾動回到頂部
在移動瀏覽器中打開時，HTML頁面頂部的文件名和圖標會震動嗎？
當用戶滾動回到頁面頂部時，如何使徽標效果恢復為“正常”？
當移動菜單打開時，我設法禁用了身體滾動，但是當我打開移動菜單時，桌面/正文頁面總是回到頂部
相關標簽