スマホでのアンカーリンク遷移

前提・実現したいこと

スマホでのアンカーリンク遷移。
WordPressで制作したページから、別階層へ設置しているindex.htmlページ内のアンカーリンク先へ遷移したいのですが、PCと同様にスマホでも指定のアンカー先へ遷移させたい。

発生している問題・エラーメッセージ

PCでは正常に動作するのですが、スマホでアンカーリンク先へうまく遷移せず、リンク先ページのトップが表示されてしまいます。

該当のソースコード

■リンク元のｐｈｐソースコード
<div class="lp-link2">
<div class="link-btn btn3"><a href="//sample.com/zzz/index.html#page18b" title="詳しくはこちら">詳しくはこちら＞</a></div>
</div>

■リンク先のhtmlソースコード
<article>
<section class="panel page18a" data-section-name="page18a" id="full">
<div>........</div>
</section>
<section class="panel page18b" data-section-name="page18b" id="full">
<div>........</div>
</section>
<article>

試したこと

以下の記述をリンク先のページへ追記してみましたが、変化ありませんでした。。

<script type="text/javascript">
$(window).load(function(){
  var lochref = window.location.href;
  if ( lochref.indexOf('#') > -1 ) {
    var anchor = lochref.slice( lochref.indexOf('#') );
    window.setTimeout(function(){
      $('body, html').animate({ scrollTop: $(anchor).offset().top }, 1);
    }, 1);
  }
});
</script>

補足情報（FW/ツールのバージョンなど）

スクロール関係で読み込まれているscriptが以下です。

    <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="../js/jquery.scrollify.min.js"></script>
    <script>
        if (window.matchMedia('(min-width:481px)').matches) $(function () {
            $.scrollify({
                section: "section",
            });
        });
    </script>
    <script type="text/javascript">
        if (window.matchMedia('(min-width:481px)').matches) $(function () {
            $(".panel").css({
                "height": $(window).height()
            });
            $.scrollify({
                section: ".panel"
            });
        });
    </script>

その他に、ユーザーエージェントでデバイスを振り分けたり、スマートフォンのa要素のhoverの動作を改善するなどのjavascriptの記述がありますが、自分で制作したサイトでなく、JavaScriptやｊQueryの知識が浅いため読み解けず、質問させていただきました。わかりやすく教えていただけると大変ありがたいです。

行動規範の内容に同意します

回答1件

見た感じだと jQuery Scrollify というライブラリを使ってリンク先を操作しているようです。
ですが、自分はこのライブラリを使ったことがないため、正確な回答はできません。

ですが、とりあえず、リンク先のHTML に id="full" という属性をつけている要素が二つあるようです。
id属性の値の重複は文法違反であり、たとえ今正常に動作していたとしてもそれはただの偶然であり、いつ動作しなくなってもおかしくない状態です。
この質問の件とは関係なくまずい状態なので、まず id重複の問題点を解消してみてください。
ちなみに、もしかしたらスマホで動作しないのは id重複のせいという可能性もあります。
運が良ければ、id重複を解消することでこの質問の問題も同時に解決します。

それで解決しなければ、それ以上は自分にはわかりません。
「jQuery Scrollify というライブラリを使っている部分に原因がありそうかな」くらいです。
なお、jQuery Scrollify が原因であった場合でも、この質問だと情報不足のため、このライブラリをよく知っている人でも回答はできないと思います。
回答がほしいなら、jQuery Scrollify に関する部分の情報を追加した方がいいと思います。

投稿2019/11/12 03:16