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

2014/02/20

by sayo

Tag : ,

jquerymobile

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

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

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

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

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

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

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

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

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

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

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

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

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

リンク用のaタグに

data-ajax=”false”

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

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

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

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

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

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

参考:しがないプログラマーの備忘録

関連するコンテンツ

コメント

  1. ありがとう

    3番目の安直な方法で問題が起きていましたのでとても助かりました。
    問題とはselectの選択選択肢が多いい場合にポップアップされるのですが、その前に3番目の方法でページ内アンカーをタップしていると、ポップアップの戻り先ページ遷移がそのページ内アンカーになってしまい、結果としてポップアップが消えずにどうにまらなくなる現象が回避できました。

    • sayo

      お役に立ててよかったです。
      お仕事がんばってください!

  2. さくら

    お世話になります。

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

    これは、どの部分に記述すれば良いですか?

    初心者で変な質問ですみません。。

    • sayo

      >> さくら 様

      ご覧頂きありがとうございます。

      ↓の2つの後であれば、どこでも動くと思いますよ。

      ・「1、リンクにイベント用のクラス名をつける」の後
      ・jqueryやjquery mobileライブラリのあと

      具体的には次のような順番にするのが一般的です。
      ーーーーーー

      ①指定したいHTML

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

      ②jqueryやjquery mobileライブラリ

      <link rel=”stylesheet” href=”//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css” />
      <script src=”//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js”></script>

      ↑のあとなら↓をどこに入れても動くはずです。

      ③「2、アンカー対策用スクリプトを書く」

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

      という順番になります。

  3. さくら

    ありがとうございます。
    無事に解決いたしました。

コメントを残す

この記事と同じ , に関する記事です。お役に立ちそうなのはどれですか?

気になる単語をサイト内検索できます

この記事と同じカテゴリ: javascript・jquery jquerymobile

>> 記事一覧を見る(TOPページ)