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 jQ

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.