loading="lazy"があると特定の位置までスクロールされない

loading="lazy"とは

imgタグでloading属性にlazyを指定すると画像近くまでスクロールするまで読み込まないことができる。(遅延読み込み)

IE11およびSafariでは使用できないが、Chrome、Edge、Firefoxなどではimgタグで使用できるので、現在は多くのWebサイトで実装されている。

https://caniuse.com/loading-lazy-attr

スムーススクロールが正しくできなくなる

imgタグにloading="lazy"を追加するだけで実装できるので便利だが、スムーススクロールが正しくできなくなるというデメリットがあるため使用する際は注意が必要。

例えば以下のリンク先のサンプルは「goto footer」のリンクをクリックすると途中にimgタグにloading="lazy"が指定されているものが複数あってfooterまでスムーススクロールさせるものだが、goto footerをクリックしてもfooterまでスムーススクロールされない。

スムーススクロールが正しくできないサンプル

画像の読み込みが間に合わない

実際にサンプルを見ればわかると思うが、スムーススクロールだと画像の読み込みが間に合っていない。

loading="lazy"は手動でのスクロールでの遅延表示のためのものなので、スムーススクロールのように速くスクロールすると読み込みが間に合わないのだ。

そのため、スムーススクロールで下方向にスクロールさせる必要がある場合はloading="lazy"は遅延読み込みによりレイアウトの高さが変わるようなWebページでは使用できない。

そのようなケースではloading="lazy"をはずす必要があるので覚えておくと良いだろう。

スムーススクロールが正しくできるサンプル