制作コラム&お知らせ

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>

が機能する。
ただし、これだけでは今流行の?スルスルスクロールにはなりません。

--- ※追記 2013.2.21 ---

上記方法はjQueryMobileのバージョンが1.2.0の頃には使えましたが、1.3.0になってから動作しなくなっています。

jQueryMobile1.3.0では、上記のJavaScriptファイルの追加は無しで、aタグに
--------------------------------------------------------------------------
<a href=”#pageTop” data-ajax=”false”>ページの先頭に戻る</a>
--------------------------------------------------------------------------
のようにすることでアンカーリンクが使えます。
アンカーリンクaタグにすべてdata-ajax=”false”を追加。(少し面倒に!)

メモ書き

デザイン事務所|エイビッツは個人事業&SOHOネットワークによる運営をしております。

Copyright © 2011-2018 Aveit. All rights reserved. — WebSite by Aveit.