スムーズスクロールのスクロール位置がずれる。
原因はLazyLoadのためだ。
スクロール位置を計算した時点ではまだ画像が読み込まれていないため、間違った座標になってしまう。
「画像の遅延読込でページ内リンクがずれる時の解決法【jQuery】 | KAITEKI CHOKIN」のコードを試した。
正しい位置にスクロールしたページもあったが、一部、正しい位置にスクロールできないページがあった。
上のコードは次のような処理になっている。
- スクロール位置を計算する。
- 計算した位置にスクロールする。
- スクロールが完了したら、もう一度スクロール位置を計算する。
- スクロール位置が現在の座標と違う場合は、計算した位置にスクロールする。
正しく動作しないページでは、スクロールが完了した時点で画像の読み込みが完了していないため、3のスクロール位置の再計算で正しい座標を得られないのではないか。
試しにスクロールしてから、画像の読み込みを1秒待ってみた。
$('a[href^="#"]').click(function(e) {
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$.when(
$("html, body").animate({
scrollTop: position
}, 400, "swing"),
e.preventDefault(),
).done(function() {
setTimeout(function() {
var diff = target.offset().top;
if (diff === position) {
} else {
$("html, body").animate({
scrollTop: diff
}, 10, "swing");
}
}, 1000);
});
});
こうすると正しい位置にスクロールできた。