在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页面顶部的文件名和图标会震动吗？
当用户滚动回到页面顶部时，如何使徽标效果恢复为“正常”？
当移动菜单打开时，我设法禁用了身体滚动，但是当我打开移动菜单时，桌面/正文页面总是回到顶部
相关标签