ページ内リンクの飛び先

[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等に埋め込んだアンカーが原因かと思い、別に

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

[mai]

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

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

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

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

[mai]

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

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

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

[投稿者]

投稿