stackoom
  简体   繁体   中英

Page scrolls back to top when the menu panel is opened in jQuery Mobile

 原文  2013-12-30 14:01:45  2   2    javascript/ html/ css/ jquery-mobile/ panel

Question

I've checked the jQuery mobile API documents and GitHub Issues but I can't find the answer to my question.

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.

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.

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>

2 answers

solution1
 2 ACCPTED  2014-01-01 17:51:57

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

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Jquery Mobile go back button scrolls to top Page scrolls to top when modal is opened issue Page scrolls to top when closing modal using back button in mobile Safari Slider scrolls the page to the top when slide (only in mobile) jQuery mobile - allow only vertical scrolling when side panel is opened? Want to Scroll to a position after loading but after a short stint it automatically scrolls back to the top (JQUERY,JQUERY-MOBILE) After concat the page scrolls back to the top 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
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM