0

I have the following scenario for mobile development using HTML5 (using HTML5 and jquerymobile)

How to restrict a page scrolling to the top before it navigates to the next screen?

I have page1, where there is a button on the bottom of the page (it needs to be scrolled-down to the bottom to find the button). This button, when clicked should navigate to an another page- say page2.

Being on bottom of the page, when I click on the button - the page1 is first going to the top and then navigating to page2. Is there a way to restrict this process? - the navigation should happen from page1 to page2 directly from bottom of page1

Here's some code to follow --

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

This is actually a listview (jquerymobile), with multiple <li>s - each href-ed to a new page.

Now, when I scroll down to the last <li> and click on it to navigate to next screen, the screen is first moving to the first <li> and then navigating to the next screen. As mentioned earlier, this is not for a website, it is for a mobile app being developed with html5 and jquerymobile

Lohith Korupolu
  • 1,066
  • 1
  • 18
  • 52
  • 2
    There's no way we can help without you showing us some code. – Vladislav Qulin Aug 20 '13 at 07:12
  • you should include relevant markup/code in your question – omma2289 Aug 20 '13 at 07:12
  • So you're saying that the mobile browser is unexpectedly scrolling back to the top before loading your new page? What browser is this? Could it be a side-effect from a piece of Javascript that gets executed on form submission? Is it specific to this mobile browser or is it repeatable on a regular desktop browser? – Miklos Aubert Aug 20 '13 at 07:40
  • @VladislavQulin - I posted some code here.. please check – Lohith Korupolu Aug 20 '13 at 11:39
  • @koala_dev I posted some code here.. please check – Lohith Korupolu Aug 20 '13 at 11:39
  • @MiklosAubert -- no it's not on a browser.. it's on a mobile app being developed with html5 and jquerymobile using phonegap (for android) – Lohith Korupolu Aug 20 '13 at 11:41
  • 2
    Ok, now I understand your problem : you're using `data-transition=slide`, so when jQuery Mobile does the animation, it needs to scroll back up so that the original viewport and the new viewport are lined up. Otherwise, if your second page wasn't as long, it would slide to an empty zone. Your question actually looks like a duplicate of [this one](http://stackoverflow.com/questions/15802134/jquery-mobile-go-back-button-scrolls-to-top). Read [Gajotres' answer](http://stackoverflow.com/a/15805031/2067786) for more details. I suggest you simply use a different animation style. – Miklos Aubert Aug 20 '13 at 11:58
  • ah! sorry @MiklosAubert - i somehow missed the existing question on SO... thank you for directing me there... I will try using a different animation style... – Lohith Korupolu Aug 20 '13 at 12:49

0 Answers0