当在jQuery Mobile中打开菜单面板时，页面将滚动回到顶部 [英] Page scrolls back to top when the menu panel is opened in jQuery Mobile
本文介绍了当在jQuery Mobile中打开菜单面板时，页面将滚动回到顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已检查jQuery移动API文档和GitHub问题，但我找不到我的问题的答案。
I've checked the jQuery mobile API documents and GitHub Issues but I can't find the answer to my question.
我创建了一个网络应用程序最新版本的jQuery Mobile。菜单是一个侧面板，当单击标题中的链接时打开。标题固定在页面顶部。
I've created a web app with the latest version of jQuery Mobile. The menu is a side panel that is opened when a link in the header is clicked. The header is fixed on top of the page.
在Safari& iOS 7上的Chrome，当我向下滚动页面，然后打开侧面板获取菜单时，页面滚动回到顶部。
In Safari & Chrome on iOS 7, when I scroll down the page and then open the side panel to get the menu, the page scrolls back to the top.
有任何方法
非常感谢您的帮助！
这里是我使用的代码：
<!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>
推荐答案
以下是futur google的搜索解决方案：
Here is the solution for futur googlers :
打开面板的链接应为：
<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">
请参阅 http://api.jquerymobile.com/panel/#option-positionFixed
这篇关于当在jQuery Mobile中打开菜单面板时，页面将滚动回到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
