bfcacheに大いにハマる

Tue, 25 Jun 2013 01:00:07 +0000

プロジェクトでjQuery Mobileとか使っていて、結構ゴリゴリ $.mobile.changePage を呼んだりするページを作ってるんですが、そんな折に、ブラウザバックすると

jQuery Mobileのtrinsitionで遷移先pageの位置を指定する方法

Fri, 26 Apr 2013 01:00:55 +0000

すんごいニッチな要求かもですが、私には必要だったので調べましたよ。

やりたいことは、タイトルの通り「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">&nbsp;</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くらい下の位置）に戻ってほしい。

ということです。

jquerymobile on yosiopp

bfcacheに大いにハマる

jQuery Mobileのtrinsitionで遷移先pageの位置を指定する方法