jQuery Mobile prevent scroll-to-top before page transition?
Before I describe your available solutions you need to understand, this is not an error nor is there a perfect solution. The issue is that to animate the transition to another page the viewport has to be at the top of the page so that the current page and the page transitioning in are vertically lined-up.
If you were half-way down a long list on one page (say 1000px) and the page you are transferring to is only a few hundred pixels tall then the current page would animate off the screen properly but the new page would not be visible as it would be above the viewport.
There are 2 viable solutions:
1. iScroll and its jQuery Mobile derivate iScrollview
iScroll homepage: http://cubiq.org/iscroll-4
iScrollview homepage: https://github.com/watusi/jquery-mobile-iscrollview
iScroll is a javascript that can scroll content in a window within a web browser with very similar behaviour to native scrolling on mobile devices such as iPhone and Android. This means you can scroll a window within the browser using native-like scrollbars and physics.
That is also a solution for our current problem. Because of iScroll implementation pages will occupy 100% of page height, no matter how far listview is scrolled. This is also a reason why on return listview will still stay at a same position.
Of course in case you want to implement this solution you should pick iScrollview implementation. You would still be able to implement iScroll, but it would take you much more time.
2. Silent scroll
Official documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
This jQuery Mobile functionality is also the same reason why we have this problem at the first place. Before a page transition is triggered original page is silently scrolled to the top.
In our case, when listview is selected, its position must be remembered (here you will find solutions of data/parameteres storing during the page transition, just search for the chapter: Data/Parameters manipulation between page transitions) before page is changed. In that case, when we return to the previous page we could use pagebefpreshow event to silently scroll to the bottom before page is shown.
//scroll to Y 100px
$.mobile.silentScroll(100);
And here's a working example of silent scroll: http://jsfiddle.net/Gajotres/5zZzz/
More info
If you want to find out more about this topic take a look at this article, you will also find working examples.
Prevent page from scrolling to top
The default behavior of jQuery Mobile when showing pages is to scroll to top upon showing a page. The value of scroll is always 0
and stored in $.mobile.defaultHomeScroll
.
You need to override this value on any page event but before page is totally shown and transition is done.
if (location.hash == "#wopwop") {
$.mobile.defaultHomeScroll = $('#wopwop').offset().top;
}
This will force scrolling to wopwop
div's offset in page without scrolling to top and then back to that div.
jquery-mobile - prevent scrolltop on loading a new page into the DOM?
jQM offers $.mobile.silentScroll
- http://jquerymobile.com/demos/1.0rc2/docs/api/methods.html
Scroll to a particular Y position without triggering scroll event
listeners.
- Arguments: yPos (number, defaults to 0).
Pass any number
to scroll to that Y location.
Examples:
//scroll to Y 100px
$.mobile.silentScroll(100);
jQuery Mobile - Page jumps to top before transition
Use $.mobile.defaultHomeScroll = 0.
From here: https://github.com/jquery/jquery-mobile/issues/2846
jQuery mobile disable vertical scroll after transition
try
$(document).delegate('.ui-content', 'touchmove', false);
Jquery Mobile - Go to top of page on transition
Try this on triggering the back button?
http://jquerymobile.com/demos/1.0b3/#/demos/1.0b3/docs/api/methods.html
//scroll to Y 100px
$.mobile.silentScroll(100);
Or on triggering the active page:
if ($("#myPage").is(".ui-page-active")) { ... }
I additionally think this is a feature which is nice, the back button takes you back to the place you have been. You don't have to re-orientate yourself because you get back to the point you were, I think its a nice usability feature.
Related Topics
How to Ignore JavaScript Exceptions When Working with Webdriver (Htmlunit, Ruby Bindings)
Why Is String Concatenation Faster Than Array Join
How to Display All Methods of an Object
How to Use Jquery with Reactjs
$ Variable (Dollar Sign) in Chrome
How to Get File Name When User Select a File via <Input Type="File" />
Changing the Key Name in an Array of Objects
Check If Element Exists in Jquery
Add CSS Styled Marker to Google Maps
Ruby on Rails - Put Method on Update Ajax
JavaScript Callback When Iframe Is Finished Loading
Fixing JavaScript Array Functions in Internet Explorer (Indexof, Foreach, etc.)
How to Subtract Date/Time in JavaScript
String Length in Bytes in JavaScript
Official Information on 'Arguments' in Es6 Arrow Functions