JQuery mobile pagecontainertransition event not working as expected

Question

I have a jQuery mobile website and on entering I want to jump to a section on the page:

$(document).on('pagecontainertransition', function(event, ui){
  $(window).scrollTop( $("#mysection").offset().top);   
  console.log("pause");
});

If I load the page and run the scrolltop line from the Javascript console, it works fine.

If I put a Javascript breakpoint on the console.log("pause"); line, I see that the page on the screen is exactly what I want. The page is jumped to mysection. However, if I release the breakpoint, it is jumped back to the top of the page.

From the documentation and googling around I understood that

pagecontainertransition

is the last Jquery mobile event.

What am I missing?

Answer 1

Thanks to Akki619 and ezanker for putting me on the right track:

My problem was caused by jquery mobile scrolling to the top of the page after loading. I do not want to use a time out (probably too short on old mobile devices or too long on desktopcomputers). I googled around and from https://forum.jquery.com/topic/jquery-mobile-scroll-to-top-of-page-on-page-load I got a way to override this behaviour in JQM, which satisfies my needs. As given there, I added the following code to my javascript:

(function($)
{
  $( document ).on( "mobileinit", function()
  {
    var silentScroll = $.mobile.silentScroll;
    $.mobile.silentScroll = function( ypos )
    {
        if ( $.type( ypos ) !== "number" )
        {
            // FIX : prevent auto scroll to top after page load
            return;
        }
        else
        {
            silentScroll.apply(this, arguments);
        }
    };
});
}
(jQuery));