気まぐれメモランダム / でたらめフィードバック

jQuery Mobileでページ読みこみ時にアンカー指定を復元する応急処置

公開: / 最終更新日:

 ネイティブアプリケーション風の処理を実現するためにjQuery Mobileがいろいろと世話を焼いていることは興味のある方はご承知かと存じます。中でもページ内アンカーの処理がそのままだと行われないことにとまどいを覚える方は少なくないに違いありません。
 幸い一般的な処理に関しては値“external”を指定したrel属性を指定したり値“false”を指定したdata-ajaxを指定するノウハウが周知されつつありますが、残念なことに初回のページロード時にURLに付加されたアンカー指定(#以降の指定、フラグメントやハッシュとも言いますね)を生かす方法は知られていません。それもそのはず、アンカー指定が生きないのはjQuery Mobileが親切にもページ初期表示時にページトップにスクロールしてくれるからです……「小さな親切大きなお世話」という言葉が脳裡をよぎるのはこんなときでしょうか。

 この動作を変えるにはおそらくjQuery Mobileのカスタマイズが必要ですが、位置を戻すだけなら次のコードもそれなりに機能します:


var pageShown = false;
$(document).on('pageshow', function() {
 $(window).on('scrollstop', function() {
  if (pageShown === false) {
   if (0 < window.location.hash.length) {
    $.mobile.silentScroll($(window.location.hash).offset().top);
   }
   pageShown = true;
  }
 });
});

 ページトップへのスクロールはjQuery MobileのAPIで行われるので、スクロール終了のイベントであらためて移動してやればいいわけです。がたがたして見栄えは悪いですが、応急処置としてはこんな方法もありますよ、ということで。

関連コンテンツ

Pick up work

最近のエントリ

アーカイブ

ブログ情報