在jQuery Mobile中打开菜单面板时，页面会回滚到顶部

Question

I've checked the jQuery mobile API documents and GitHub Issues but I can't find the answer to my question. 我检查了jQuery移动API文档和GitHub问题，但我找不到我的问题的答案。

I've created a web app with the latest version of jQuery Mobile. 我用最新版本的jQuery Mobile创建了一个Web应用程序。 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. 标题固定在页面顶部。

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. 在iOS 7上的Safari和Chrome中，当我向下滚动页面然后打开侧面板以获取菜单时，页面会滚动回到顶部。

Is there any way to have the panel open without having the page scroll back to the top? 是否有任何方法可以让面板打开而不会将页面滚动回顶部？

Thank you very much for your help! 非常感谢您的帮助！

Here is the code I use : 这是我使用的代码：

<!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>

Answer 1

Here is the solution for futur googlers : 这是未来谷歌的解决方案：

The link to open the panel should be : 打开面板的链接应该是：

<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>

With the div for the panel set as : 将面板的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">

See http://api.jquerymobile.com/panel/#option-positionFixed 请参见http://api.jquerymobile.com/panel/#option-positionFixed

Answer 2

 <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 =“＃”将始终排在最前面，你必须改变它。

在jQuery Mobile中打开菜单面板时，页面会回滚到顶部

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-01-01 17:51:57

解决方案2
0 2013-12-30 14:09:58

在jQuery Mobile中打开菜单面板时，页面会回滚到顶部

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-01-01 17:51:57

解决方案2 0 2013-12-30 14:09:58

解决方案1
2 已采纳 2014-01-01 17:51:57

解决方案2
0 2013-12-30 14:09:58