ページ内リンクの飛び先

ホーム フォーラム テンプレート(テーマ) ページ内リンクの飛び先

このトピックには2件の返信が含まれ、1人の参加者がいます。4 ヶ月、 1 週前 mai さんが最後の更新を行いました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #90427

    mai
    参加者

    宜しくお願いいたします。

    現在の環境は下記の通りです。
    WordPress のバージョン:5.4
    Welcart のバージョン: 1.9.31
    Welcart専用の拡張プラグイン:
    ご利用のテーマ:voll(子テーマ)
    症状を確認したブラウザ:chrome デベロッパーツール
    サーバー:(会社名、サービス名)xserver
    SSLの利用:(独自 常時SSL)

    ページ内リンクの飛び先が安定しない状況です。
    以前使用していたwelcart baisic child に戻すと正常に動作します。
    下記のコードをheader.phpに入れています。

    <script type=”text/javascript”>
    /* 固定メニュー分だけ ページ内アンカーを下げる */
    /* ページ内の内部リンク用 */
    jQuery(function($) {
    $(‘a[href^=#]’).click(function() {
    var href= $(this).attr(“href”);
    var target = $(href == “#” || href == “” ? ‘html’ : href);
    var position_anchor = target.offset().top;
    var windowWidth = window.innerWidth;
    if ( windowWidth < 1000 ) {position_anchor -= 57;}
    else{position_anchor -= 45;}
    $(‘body,html’).animate({ scrollTop: position_anchor },800,’swing’);
    return false;
    });
    });
    </script>
    ネット検索にて見つけたものに固定メニューの高さ分を調節している内容です。
    h2 h3等に埋め込んだアンカーが原因かと思い、別に

    にて設けています。
    症状は一番上のアンカーへは正常に動作しますが、3番目以降のアンカーには近くに飛びます。
    #mastheadのページトップに帰りもう一度3番目移行のアンカーに飛ばすと正常に動作します。
    ただ安定はしていません。
    何が原因しているのか解りません。
    プラグイン等も影響するようなものは入れていないと思っています。
    アドバイスのほど宜しくお願いいたします。

    #90428

    mai
    参加者

    position_anchorの値をchromeのcosoleに表示すると
    初回は22745.***
    #mastheadにジャンプにて画面トップ
    2回目は22989.***
    #mastheadにジャンプにて画面トップ
    3回目は23186.***で正しくジャンプしています。

    初回は22745.***
    #mastheadにジャンプさせずに画面をスクロールにて戻すと
    2回目で23186.***で正しくジャンプしています。

    画面の最下部までスクロールにていき、スクロールにて画面トップの
    メニューまで戻りアンカーにジャンプさせると初回でも正しくジャンプします。

    何かここらあたりに原因が隠れていそうな気がしています。
    var position_anchor = target.offset().top;が正しい値を
    取得できていないのが原因の様です。
    ではどうすべきか????
    アドバイスお待ちしています。

    #90429

    mai
    参加者

    target.offset().top;が正しい値を取得できていないのが原因は
    画像の読み読みが完了していないのが原因の様です。
    怪しいプラグインはa3 Lazy Loadです。近くまで来ないと読み込まないのだから
    高さの取得はできなくて当然です。
    下記のとをすることで正常にジャンプしています。たぶん

    a3 Lazy Loadの無効化
    $(window).load(function(){ });で囲むことにしました。

    consoleにログをだすことで怪しい所が見えてきました。
    1日半掛かりました。
    他に良い方法があればご教示下さい。
    正直a3 Lazy Loadの無効化は避けたいのが本音です。
    もう少し通信速度が速くなれば問題はないのですが、画像の使用量が多いと・・・

3件の投稿を表示中 - 1 - 3件目 (全3件中)

このトピックに返信するにはログインが必要です。