WordPressのプラグイン「ISmash Balloon Social Photo Feed（旧Instagram Feed）」を埋めこんだページでちょっとしたトラブルがあったので、備忘録的に解決方法をメモしておきたいと思います。
起きた現象としては、他のページから遷移先のページ内リンクに飛ばした時にページ内リンクの位置がズレるという現象でした。
前提として下記のコードが別ページへの遷移でのページ内リンクのズレを解消しているコードになります。
$(window).on('load', function() {
const url = $(location).attr('href'),
// headerの高さを取得
headerHeight = $('header').outerHeight();
// urlに「#」が含まれていれば
if(url.indexOf("#") != -1){
// urlを#で分割して配列に格納
const anchor = url.split("#"),
// 分割した最後の文字列（#◯◯の部分）をtargetに代入
target = $('#' + anchor[anchor.length - 1]),
// リンク先の位置からheaderHeightの高さを引いた値をpositionに代入
position = Math.floor(target.offset().top) - headerHeight;
// positionの位置に移動
$("html, body").animate({scrollTop:position}, 300);
}
});
コードは下記のサイト様を参考にさせて頂きました。
上記コードをJSで読み込んでいれば、基本的には別ページでもアンカーリンクの箇所で飛んでもらえるはず…だったのですが…。
Smash Balloon Social Photo Feed（旧Instagram Feed）を導入したサイトで遷移先へのズレが発生
Smash Balloon Social Photo Feed（旧Instagram Feed）を使用したサイトでズレが起きる現象に合いました。
スクリプトを修正したり、ネガティブマージンなど利用し解決をこころみましたが、解決できず。
原因を探していたところInstagramのフィードを埋め込んでいる箇所より下へのページ内リンクのみずれている事実に気づきました。
原因はインスタグラムのロードが終わる前に高さを計算していた
上記の理由から試しにサイト内のインスタグラムの埋め込みを消してみたところ、ページ内リンクが正しく動くことが判明しました。
WordPressでサイトを作成している場合は、不具合が起きたときは一度プラグインを全部切ってみるのが解決への近道ですね。
おそらくスクリプトが動いているタイミングではまだインスタグラムが読み込まれていないために、埋め込まれているインスタグラムの高さ分、ページ内リンクがずれていた様です。
解決法：min-heightをインスタグラムの埋め込む箇所に入れてあげよう
上記の原因からインスタグラムを囲んでいるブロックなどにCSS側でインスタグラム分の高さのmin-heightやheightを持たせてあげることで、ページ内リンクへのズレ解決することが出来ました。
もう少し良い方法があるかもしれませんが、現状はこちらの方法で致命的な大きなズレを解消することができましたので、同じ現象に悩んでいる方がいましたら、ぜひ活用してみてくださいね、
