suzuboss.info

実際に使ってみた・試してみた経験が誰かの「かゆいところに手が届く」なら幸いです。

Web系

jQuery Mobileでページ内アンカーと外部からのアンカー

投稿日:2015/02/02 更新日:

ほとんど触ったことのない『jQuery Mobile』ですが、少し触る機会がありました。

ハッシュタグを使ったアンカーで、通常はハッシュタグで指定の箇所へページ内アンカーとして動くのですが、jQuery Mobileは仕様上、ハッシュでのアンカーは効かないようです。

ページ内でアンカーを有効にするには、data-ajax属性に「false」を指定すると通常のページ遷移を行なうらしいです。これだけでOK。

<a href="http://suzuboss.info/" data-ajax="false">suzuboss.info</a>

ここまでは良かったのだけど、別ページに飛ぶアンカーの場合に、一瞬目的の場所へいくものの、すぐにページトップへ行ってしまう。別ページにしちゃえばいいんだけど、そうもいきませんでした。。。

http://suzuboss.info/sample.html#hoge

半日調べて行き着いたのが以下のページ。

http://wenda.baba.io/questions/1771922/jquery-mobile-anchor-links-without-ajax-not-loading.html

そうかイベントをキャンセルすればよかったのか。。。

最終的にページ内アンカーはぬるっと動くのも入れたのでこんな感じに

$(document).ready(function() {
	$("a:not([data-rel=dialog])").attr({ "data-ajax":"false" });
});

$(document).bind("pageshow",function(e){
    var elem;
    elem = $(location.hash);
    if(elem){
        $(document).bind("silentscroll",function(e,data) {
            $(this).unbind(e);
            window.scrollTo(0, elem.offset().top);
        });
    }

	$(".smoothScroll").click(function(){
		var speed = 500;
		var target = $(this).attr("href");
		var position = $(target).offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});

});

ページ内アンカーって使う機会あると思うんだけどな。なぜこんな仕様なのだろうか?解決してよかった。

【追記】 2015/02/07

リンクだけかと思っていたら、フォームもajaxで変な挙動になったので、同様にformタグへ『data-ajax=”false”』と記述しておいた。jQuery Mobileが嫌いです。

-Web系

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

リンク画像をロールオーバーでクロスフェードさせる

jQuery v1.10.2で動いています。 aタグに含まれた画像のフェードタイプのロールオーバーです。画像のファイル名の末尾には「_on」「_off」をつけておきます。aタグ内に画像もテキストも含ま …

no image

Google API OAuth 2.0のリフレッシュトークンでハマった

WebアプリでGoogle Search ConsoleのAPIを使うにあたり、リフレッシュトークン関連でハマったのでメモしておきます。 アクセストークンの取得 特に何も考えずにアクセストークンを取得 …

no image

EC-CUBEで規格以外に項目を追加した①

試行錯誤の末に問題なく動作するようになったと思うので、メモ的に残しておきます。 利用したEC-CUBEのバージョンは『2.13.2』です。テンプレートは『EC-CUBE on Bootstrap3』に …

no image

EC-CUBEで規格以外に項目を追加した③

前回はフロント側のクラスまわりをカスタマイズしたのでその続きから始めます。 受注管理あたりをカスタマイズすることになります。

no image

Google Chartsを使った簡単な折れ線グラフ

時々ですが、Webページにグラフを埋め込む必要があったりする場面があります。検索をすればサンプルはたくさんできてくるので大変ありがたい所です。使うライブラリとしては「Google Charts」と「C …

記事を探す