I'm trying to dynamically update the content of a page with jquery mobile ( $('#testpage').page('destroy').page(); ), and reset the scroll position ( $.mobile.silentScroll(0); ).
It works but for a few milliseconds, jquery shows the new content scrolled down at the old position. I wish to show the new content directly scrolled at the top of the page.
There must be a parameter in jquery that remembers the scroll position when you call $('#testpage').page('destroy').page();, and I wish to reset this parameter.
Maybe I'm having the wrong approach, and I should use 2 separated divs for the 2 pages.
The reason I'm doing this is because I want the hash in the url being the same for the 2 pages, and I don't want the user being able to go back to the previous page with the browser back action. If I can achieve this with 2 separated divs, that would be fine too.
Here is a jsfiddle to illustrate : http://jsfiddle.net/EKFSy/2/
I replaced $.mobile.silentScroll(0); with $.mobile.changePage( $('#testpage') , {allowSamePageTransition:true} ); and it worked.
Note that I also tried to play with $.mobile.urlHistory.getActive().lastScroll. It was not necessary in my case to set it to zero (because it seems changePage on the same page already reset the scroll position), but that might be a useful value to play with if you want to change the scroll positions in your history.