Lazy Loadでも位置がずれないアンカーリンク移動のJQUERYスクリプト

Lazy Loadでも位置がずれないアンカーリンク移動のJQUERYスクリプトをご紹介いたします

Lazy LoadでJQUERYのアンカーリンクへの移動がずれる問題

Lazy Loadとは後から画像を読み込むページ高速化の手法ですが、この仕組みを使用しているページでは、その画像が画面上に出てきた後から画像が読み込まれてページの高さが変わるため、jQuery.smoothScroll や.animateその他のアンカーリンク移動の為のJAVASCRIPTで位置がずれることがあります。

これを防ぐには下記のようなJAVASCRIPTプログラムを利用します。

function scroller(target){
    
    jQuery('html, body').animate({
			scrollTop: jQuery(target).offset().top -20 
		}, {
			duration: 800,
			step: ( now, fx ) => {
				let realPos = jQuery(target).offset().top-20;
				if (fx.end !== realPos) {
					fx.end = realPos;
				}
			},
		});
}

このスクリプトは、 scroller(移動したい要素ID)　のように使用します。

jQuery(‘html, body’).animate　でいったんその位置に移動してから、duration: 800で０．８秒間の間、本来の移動するべき位置とずれている場合は、そのずれを補正して、再度移動します。

アンカーリンクに移動するようなスクリプトで使用する場合は下記のようになります。

jQuery("アンカーリンクを含むDIV等 a").click(function(e) {
    e.preventDefault();
    scroller(jQuery(this).attr("href"));
});

上記スクリプトは、押されたA要素のhrefを取得の上同名のIDもしくはクラスを持つ要素の位置にスクロールします。
Lazy Loadの画像があってもずれないようになっています。

WordPress ワードプレスのテーマやプラグインのカスタマイズ・修正・コーディングのご依頼・ご相談はWPドクターまでお気軽にお送りください