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

ほとんど触ったことのない『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が嫌いです。