Blog: hack: my fix for the scroll-to-top issue with jquery mobile transitions

i hate that every time i go to another page in jqm, the page scrolls to the top. i understand why it does that, but it still bugs me. so here’s a dirty hack for you. (and yes, it involves setting the next page to fixed position… eeeeeeewwwwwww)

it ait pretty, but it works. 


function noScrollSlide(name, reverse, $to, $from) {
	var deferred = new $.Deferred()
		toScroll = $('body').scrollTop(),
		toClasses = reverse ? ' slide in reverse' : ' slide in',
		fromClasses = reverse ? ' slide out reverse' : ' slide out';
	
	$from.addClass( fromClasses );

	$to.css({position:'fixed'}).addClass( $.mobile.activePageClass + toClasses );
	$to.animationComplete(function(){
		$from.removeClass($.mobile.activePageClass).add($to).removeClass('slide in out reverse');
		window.scrollTo(0,0);
		$to.css({position: 'inherit'});
		deferred.resolve();
	});

	return deferred.promise();
}

$.mobile.transitionHandlers["slide"] = noScrollSlide;

Posted by: Michelangelo Capraro on  

Category: mcapraro.com > Blog

3 Responses to “hack: my fix for the scroll-to-top issue with jquery mobile transitions”

  1. Daniela says: Ciao Michelangelo,

    I’m having the same issue. Do you have an online demo of the code?

    Thanks

  2. jacky says: Hi michel, where to add these codes?

    I add the codes to the js bottom, but happened the errors.

    plz advise.