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

sayo

＞＞ さくら 様

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

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

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

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

①指定したいHTML

<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>

②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>

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

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

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

という順番になります。