目次のジャンプがズレるのをjQueryで修正してみた【WordPress】

こんにちは、さしまるです!

今回は目次やアンカーリンクのジャンプがズレてしまう原因と、対策について紹介していきます。

ちなみに↓の目次を開いて適当な場所へジャンプして頂ければそのような動きにする事が可能になるという感じです。

そもそも目次のジャンプがズレる原因は?

目次がズレて泣きたい

恐らくは画像の遅延読み込みが原因と思われます。

『Lazy Load』などのプラグインを使っているとこの問題が発生する事があるようです。

プラグインを停止すれば一発解決なのですが、ブログ高速化の為にも適用させておきたいですよね…

という事で僕はjQueryを使って対策しているので(力技ですが)、その方法を解説していきます。

【対策】</body>直上にコードを追加する

コードを追加する

先に注意点なのですが、どのような要因で不具合が出るかも分かりませんので、必ずバックアップを取ってから作業して頂ければと思います。

作業としては</body>直上に下記のコードを追加して頂ければOKです。

<script>
jQuery(‘a[href^=”#”]’).click(function(e) {
var href = jQuery(this).attr(“href”);
var target = jQuery(href == “#” || href == “” ? ‘html’ : href);
var position = target.offset().top;

jQuery.when(
jQuery(“html, body”).animate({
scrollTop: position
}, 500, “swing”),
e.preventDefault(),
).done(function() {
var diff = target.offset().top;
if (diff === position) {
} else {
jQuery(“html, body”).animate({
scrollTop: diff
}, 50, “swing”);
}
});
});
</script>

要するにズレる前提で、その後jQueryを使って修正するという事ですね。

とりあえず僕は今のところこの方法を採用しています。

ちなみにこの方法でサイト全体のスピードはそこまで落ちませんでした。

もしサイトのスピードが気になるようであれば下記の記事も参考になるかと思います。

という事で、今回は以上になります。

もしも誰かの為になっていれば幸いです!

おすすめ介護転職サイト
【介護転職サイト厳選10社】
この記事では、転職サイト26社を調査した中から、介護の仕事を探す方へ本当におすすめ出来る10社を厳選し転職活動の目的別で紹介しています!
こちらから要チェック