ページ内リンクが飛べないのはjquerymobileのせいだった！ページ内ジャンプできる修正方法

jquerymobile(ジェイクエリモバイル)を利用している場合は、ページ内リンク（ページ内ジャンプ、ページ内アンカー）が効かないようです。

jquerymobileでは1つのファイルで複数のページがあるように作ることができ、その機能上で「#（ハッシュ、シャープじゃないよ）」を利用するために、
ページ内アンカーするときには「＃」が無効化されてしまうようです。

みなさんがいろいろ対応するためのjavaスクリプトを作成してくれているんですが、複数のページ内リンクにも対応しているスクリプトがこちらでした。

１、リンクにイベント用のクラス名をつける

リンク用のaタグに、class=”anchor”という名前をつけました。

名前付け用のaタグはいつも通りnameやidに名前をつけます。

<a href="#aaa" class="anchor">アンカー１</a>｜
<a href="#bbb" class="anchor">アンカー２</a>｜
<a href="#ccc" class="anchor">アンカー３</a>
	1<br>
    2<br>
    3<br>
	4<br>
	<a name="#aaa" id="aaa">アンカー１はここに移動する</a><br/ >
    5<br>
    6<br>
    7<br>
	<a name="#bbb" id="bbb">アンカー２はここに移動する</a><br/ >
    8<br>
    9<br>
    10<br>
	<a name="#ccc" id="ccc">アンカー３はここに移動する</a><br/ >
	11<br>
    12<br>
    13<br>

２、アンカー対策用スクリプトを書く

こちらのスクリプトを入れます。

<script type="text/javascript">
	$(document).on('click', 'a.anchor', function(e){
		e.preventDefault();
		var y = $($(this).attr('href')).offset().top;
		$.mobile.silentScroll(y);
	});
</script>

私はこれでリンクできるようになりました。

３、リンク用aタグのAjaxを無効にする

これでもダメなら、aタグのAjaxを無効にします。

リンク用のaタグに

data-ajax=”false”

を追記すれば、その部分のAjaxが無効になります。

<a href="#aaa" data-ajax="false">アンカー１</a>

これでもダメなら、どこかにタグの間違いがないか、疑ってみる・・かな・・。

ほんとjquerymobile嫌い(ノ◇≦。)

前任者がサイトに使ってからしょうがないけど・・。

HTMLはごちゃごちゃするし、
なんでこんなに普及しているんだろう。