jQuery Mobileでページ先頭へ戻るアンカーリンク設置方法
2013/01/17
スマートフォンサイト制作に「jQuery Mobile」を使うことも多いと思います。
昨年暮れにjQuery Mobile1.2.0安定板が出たばかりですが、元々高機能なフレームワークにさらに多数の機能が追加されました。
なかなかすべてを把握して使いこなすのは至難の業ですが、基本中の基本、ページ先頭へ戻るアンカーの設置が通常の<a href="#">では機能しません。
jQuery Mobileでは<a
href="#">は、JavaScriptによる処理、機能を生成するために、<a
href="#">要素をシステム内で予約しているため、この方法では何の動きもしない。
画面移動をすべてAjaxで行っているために、その際IDその他の”ゴミ”がURLについて回るからだそうで・・・
jQuery Mobileでは、HTMLファイル一つに複数のページを構築し、JavaScriptによって動的な動きでページを移動する（ように見せる）代表的な機能があり、またスマホでは縦長でスクロールが長いページよりも、ページ移動の仕組みの方が操作しやすい場合が多いため、このような従来の機能は実装されていないのかもしれない。
しかし、どうしてもページトップへ戻る機能をつけたい場合。
JavaScriptファイルに下記を追加。
-------------------------------------------------------------------------
$('#pageTop').live('click', function() {
$.mobile.silentScroll();
});
-------------------------------------------------------------------------
とすることで、
＜body id="pageTop"＞
↑
<a
href="#pageTop">ページの先頭に戻る＜/a＞
が機能する。
ただし、これだけでは今流行の？スルスルスクロールにはなりません。
上記方法はjQueryMobileのバージョンが1.2.0の頃には使えましたが、1.3.0になってから動作しなくなっています。
jQueryMobile1.3.0では、上記のJavaScriptファイルの追加は無しで、aタグに
--------------------------------------------------------------------------
<a href=”#pageTop” data-ajax=”false”>ページの先頭に戻る＜/a＞
--------------------------------------------------------------------------
のようにすることでアンカーリンクが使えます。
アンカーリンクaタグにすべてdata-ajax=”false”を追加。（少し面倒に！）
メモ書き