すんごいニッチな要求かもですが、私には必要だったので調べましたよ。
やりたいことは、タイトルの通り「jQuery Mobileのtrinsitionで遷移先pageの位置を指定する」ことなんですが、
具体例を挙げて言うと、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="hoge">
<header data-role="header"><h1>hoge</h1></header>
<div style="height:3000px"> </div>
<p><a href="#fuga" data-transition="slidefade">fugaへ遷移</a></p>
</div>
<div data-role="page" id="fuga">
<header data-role="header"><h1>fuga</h1></header>
<p><a href="#hoge" data-transition="slidefade" data-direction="reverse">hogeへ遷移</a></p>
</div>
</body>
</html>
たとえばこんなHTMLの場合。[サンプル]
(※hogeページはリンク位置が3000pxくらい下にあるところに注意)
リンクを辿るとhogeからfugaにslidefadeで遷移して、fugaからhogeにslidefade(reverse)で遷移します。
この時、fugaからhogeに戻る際、pageの先頭に戻っちゃうんですが、hogeからfugaに遷移したときの位置(3000pxくらい下の位置)に戻ってほしい。
ということです。
んで方法なんですが、jQuery Mobileのソースを読んだ結果、
遷移前に$.mobile.defaultHomeScrollを書き換えちゃえ!という方法に落ち着きました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
var positionTop = 0;
$(function(){
$("#hoge")
.on('pagebeforehide',function(){ // hoge->fuga時のhoge非表示前
// 遷移前のスクロール位置を保存
positionTop = $(document).scrollTop();
})
.on('pagebeforeshow',function(){ // fuga->hoge時のhoge表示前
// hogeに戻ってきたときdefaultHomeScrollに遷移前のスクロール位置を上書き
var tmp = $.mobile.defaultHomeScroll;
$.mobile.defaultHomeScroll = positionTop;
positionTop = tmp;
})
.on('pageshow',function(){ // fuga->hoge時のhoge表示後
// 表示後、defaultHomeScrollを元に戻す
$.mobile.defaultHomeScroll = positionTop;
});
});
</script>
</head>
<body>
<div data-role="page" id="hoge">
<header data-role="header"><h1>hoge</h1></header>
<div style="height:3000px"> </div>
<p><a href="#fuga" data-transition="slidefade">fugaへ遷移</a></p>
</div>
<div data-role="page" id="fuga">
<header data-role="header"><h1>fuga</h1></header>
<p><a href="#hoge" data-transition="slidefade" data-direction="reverse">hogeへ遷移</a></p>
</div>
</body>
</html>
処理はjavascript部のコメントに書いてある通りです。
slideだと動きに違和感あるのでslidefadeがオススメですよ。
…うーん、やっぱ需要ないかなw