jquery - クリックするとページの下部にあるボタン、ページ全体が上にスクロールしてから次のページに移動する

Question

HTML5 (HTML5 と jquerymobile を使用) を使用したモバイル開発のシナリオは次のとおりです。

次の画面に移動する前に、ページのスクロールを一番上に制限するにはどうすればよいですか?

ページの下部にボタンがあるpage1があります(ボタンを見つけるには、下にスクロールする必要があります)。このボタンをクリックすると、別のページ、たとえばpage2に移動する必要があります。

ボタンをクリックすると、ページの下部にある - page1は最初に上部に移動し、次にpage2に移動します。このプロセスを制限する方法はありますか? - ページ 1 からページ 2 へのナビゲーションは、ページ 1 の下部から直接行う必要があります

従うべきいくつかのコードがあります -

<div data-role="page" data-theme="b" id="shopsMenuPage">     
  <div data-role="content" >
    <h3>Shops &amp; Hangouts</h3>
    <ul data-role="listview" data-inset="true" data-theme="c" >
      <li id="restaurantsList" data-icon="info"><a href="#foodNBeverages" data-transition="slide"><img src="images/foodNBeverages.png" />
        <h3> Food &amp; Beverages</h3>
        </a></li>
      <li id="dutyFreeList" data-icon="info"><a id="dutyFree" href="#foodNBeverages" data-transition="slide"><img src="images/dutyFree.png"/>
        <h3> Duty Free Shops</h3>
        </a></li>
      <li id="florists" data-icon="info"><a href="#foodNBeverages" id="flowers" data-transition="slide"><img src="images/flowers.png" />
        <h3> Flower Shops</h3>
        </a></li>
      <li id="bookShopList" data-icon="info"><a href="#foodNBeverages" id="books" data-transition="slide"><img src="images/bookShop.png" />
        <h3> Book Shops</h3>
        </a></li>
      <li id="musicStores" data-icon="info"><a href="#foodNBeverages" id="music" data-transition="slide"><img src="images/music.png" />
        <h3> Music Store </h3>
        </a></li>
      <li id="garAndAcc" data-icon="info"><a href="#foodNBeverages" data-transition="slide"><img src="images/garments.png" />
        <h3> Garments &amp; Accessories </h3>
        </a></li>
    </ul>
  </div>      
</div>

これは実際にはリストビュー (jquerymobile) であり、複数<li>の があり、それぞれhrefが新しいページに編集されます。

ここで、最後までスクロールして<li>クリックして次の画面に移動すると、画面は最初の画面に移動してから次の画面に移動し<li>ます。前述のとおり、これは Web サイト用ではなく、html5 と jquerymobile で開発されているモバイル アプリ用です。