では高収入求人をはじめとする介護の転職情報がもらえます！
こんにちは、佐久間です！
今回は目次やアンカーリンクのジャンプがズレてしまう原因と、対策について紹介していきます。
ちなみに↓の目次を開いて適当な場所へジャンプして頂ければそのような動きにする事が可能になるという感じです。
そもそも目次のジャンプがズレる原因は？
恐らくは画像の遅延読み込みが原因と思われます。
『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を使って修正するという事ですね。
とりあえず僕は今のところこの方法を採用しています。
ちなみにこの方法でサイト全体のスピードはそこまで落ちませんでした。
もしサイトのスピードが気になるようであれば下記の記事も参考になるかと思います。
【WordPress】ブログを高速化する為に使っているおすすめプラグイン
という事で、今回は以上になります。
もしも誰かの為になっていれば幸いです！