「lazyload 対応」スムーズスクロールの書き方

どうも7noteです。lazyloadを入れていてもスムーズにページ内リンクできる方法

以前表示速度が少し心配なサイトがあり、lazyload属性を使いつつもでもページ内リンクをさせたい場面がありました。

もし対策せずにどちらも入れてしまうと、画像が読み込まれていないかページ内リンクの高さ取得が上手くできず
画像が後から読み込まれることで高さが変わってしまい、本来の位置よりも上の方に移動してしまいます。

ですがjQueryのwhenを使うことでこの問題を解決することができます。

lazyload対応スムーズスクロールの書き方

※jQueryを使用しています。jQueryってなんだという方はこちら

$(function () {
    $('a[href^=#]').click(function(e) {
        var headerHight = 50;   /* ヘッダーの高さ(50px) */
        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://kaiteki-chokin.com/anchor-link-lazy-loading/

whenについて簡単に解説

whenを使うことで、複数の非同期処理が全部終わったら、続く処理を行うことができます。
今回の処理ではこれを利用し、画像がlazyloadでちゃんと読み込まれた後に正しい位置までのスクロール処理を行なっています。

まとめ

jsは様々な便利なライブラリやソースがネットにあるので1つのページに様々な種類のソースを書くことは珍しくありません。
ただ、その動き方やソースの内容や特性をしっかり理解できないと相性が悪く上手く動かない事もあります。

なので自分がソースを書くことも大事ですが、他人のソースを読めることも大事だと思います。

おそまつ

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ