【jQuery】スムーススクロールの位置が最初だけおかしいときの原因と対処法

目次

• 方法① JSを書き換える
• 方法② imgにwidthとheight属性を書く

方法① JSを書き換える

JSのスムーススクロールの記述を､LazyLoad対応版に置き換えましょう｡

$('a[href^=#]').click(function(e) {
	var href = $(this).attr("href");
	var target = $(href == "#" || href == "" ? 'html' : href);
	var position = target.offset().top - headerHight;

	$.when(
		$("html, body").animate({
			scrollTop: position
		}, 400, "swing"),
		e.preventDefault(),
	).done(function() {
		var diff = target.offset().top - headerHight;
		if (diff === position) {
		} else {
			$("html, body").animate({
				scrollTop: diff
			}, 10, "swing");
		}
	});
});

参考 : https://teratail.com/questions/274473

これができない場合は､次を｡

方法② imgにwidthとheight属性を書く

方法①ができない場合は､LazyLoadを設定しているimgタグにwidthとheight属性を書きましょう｡

このように

<img data-src="img.jpg" width="100" height="100" class="lazyload">

すると､画像が読み込まれる前でも高さが計算されるため､位置のズレも生まれないはずです｡

コメント