Prevent scroll to the top before page transition in jQuery Mobile

JavaScript
1

Hello to everybody!
I’m creating an app with phonegap and Jquery mobile.
I have lot of listviews and during the page transition, if first page is scrolled down it will jump to the top before transitioning to the another page.

How can I fix this problem?

I’m not an expert and I hope somebody can help me!

Thanks!

2

Without seeing the code my best guess would be that you are using an <a> tag to trigger the transition instead of a <button> tag.

3

Sorry for the late answer!
You are righyt I’m using a listview and linking the page with <a href="…>.

Next you can see the html code and javascript.

THANKS FOR YOUR HELP!

Html

<!DOCTYPE HTML>
<html>
<head>
<title>CATEGORIA FANTASY</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/tema-verde.css" />
<link rel="stylesheet" href="css/tema-verde.min.css" />
</head>
    
<body>
           
<div id="fantasyListPage" data-role="page" data-theme="a">

	<div data-role="header" data-position="fixed" data-theme="a">
		<a href="index.html" data-icon="home" data-iconpos="notext"></a>
		<h1>FANTASY</h1>
	</div>


	<div data-role="content" data-theme="a">
        <ul id="fantasyList" data-role="listview" data-filter="true" data-filter-placeholder="Cerca libro/autore..." data-theme="a"></ul>
 		
 		<div id="loading" style="display:none;" align="center">
  			<br><p>Caricamento Dati...<br><img src="images/ajax-loader.gif" alt="Loading"/></p>
		</div>    
    
    </div>		

</div>

<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script src="js/employeelist.js"></script>
<script src="js/employeedetails.js"></script>
<!--<script src="js/reportlist.js"></script>-->

<script>
	 

</script>

</body>

</html>

Javascript


var serviceURL = "http://www......./";

var employees;

$(document).ready (function() {
getFantasyList();
});

$(document).delegate('#fantasyListPage','pageshow', function(event) {
     //navigator.notification.activityStart("Attendere","caricamento dati in corso.... ");
     
    $('#loading').ajaxStart(function() {
    $(this).show();
    })
     
     getFantasyList();
});


$('#fantasyListPage').bind('pageinit', function(event) {
	getFantasyList();
});

function getFantasyList() {
	$.getJSON(serviceURL + 'get-list-fantasy.php', function(data) {
		$('#fantasyList li').remove();
		employees = data.items;
		$.each(employees, function(index, employee) {
			$('#fantasyList').append('<li><a href="employeedetails.html?id=' + employee.id + '">' +
					'<img src="employee.img + '" width="58px" height="80px" />' +
					'<h4>' + employee.title + '</h4>' +
					'<p>' + employee.info1 + '</p>' +
					'</a></li>');
		});
		$('#fantasyList').listview('refresh');
		
		$('#loading').ajaxComplete(function() {
    	$(this).hide();
    	});
		
	});
}