javascript - jQuery Mobile prevent scroll-to-top before page transition?

Question

When I click on a list-item, to go to another page, the current page jumps to the top of the screen before transitioning to the next page.

This problem occured in jQM 1.2, and is still not fixed in the newly released 1.3 version.

Does anybody know how to prevent the scroll-to-top, and remember the scroll position when using the back button?

This annoying behaviour is unacceptable, and breaks the whole app experience.

I'm using it as a webapp, on an iPhone 4S, with iOS 6.1.2.

Answer 1

I was able to fix this (for iOS) in the following way:

1. Add a extra container div for the scrolling part. Usually surrounding the scrolling part of your page. In my case right after the header and before the footer code.

2. Add the following CSS:

   .extracontainer {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: 0;
     padding: 0;
     overflow: auto;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
   }
   

Some of the CSS might be extra but in my case it was to avoid any issues with some other styles that I have using negative margins, paddings, etc.

Also make sure to have the -webkit-overflow-scrolling: touch; to have smooth scrolling.

I hope this helps.