jQueryでスムーズスクロールを作っているが、画面サイズに応じて処理を変更するコードを加えると動きがおかしくなる

Question

jQueryでスムーズスクロールを作っています。
ナビゲーションメニューをクリックすると該当する部分にスムーズに移動してくれるコードです。

HTML、CSS、jQueryの各コードは次の通りです。

<header id="header">
    <a href="#main">ホームページタイトル</a>
    <nav>
        <ul>
            <li><a href="#features">特徴</a></li>
            <li><a href="#price">価格</a></li>
            <li><a href="#contact">お問い合わせ</a></li>
            <li><a href="#footer">フッター</a></li>
        </ul>
    </nav>
</header>
<div id="main">メイン</div>
<div id="features">特徴</div>
<div id="price">価格</div>
<div id="contact">お問い合わせ</div>
<footer id="footer">フッター</footer>

#main,#features,#price,#contact,#footer {
    height: 500px;
}

$(function () {

    $("a[href^='#']:not([href='#'])").click(function () {
        var target = $($(this).attr("href")).offset().top;
        target -= 80;
        $("html, body").animate({ scrollTop: target }, 500);
        return false;
    });

});

実はこのjQueryのコードは問題なく動いてくれます。

そこでこのjQueryコードにもう少し手を加えることにしました。
私の作るサイトではヘッダーの高さが、
大きな画面のときと小さな画面のときと異なります。

そこで大きな画面のときと小さな画面のときとで、スクロール距離を変えようと思い、
jQueryを次のように書き加えました。

$(function () {

    $(window).on('load resize', function () {

        var w = $(window).width();
        var x = 768;

        if (w < x) {
            $("a[href^='#']:not([href='#'])").click(function () {
                var target = $($(this).attr("href")).offset().top;
                target -= 80;
                $("html, body").animate({ scrollTop: target }, 500);
                return false;
            });
        } else {
            $("a[href^='#']:not([href='#'])").click(function () {
                var target = $($(this).attr("href")).offset().top;
                target -= 200;
                $("html, body").animate({ scrollTop: target }, 500);
                return false;
            });
        }

    });

});

if関数を使って、768px以上のときと768px未満の場合を分けています。

768px以上のときと768px未満のときとで異なるのは、
target -=80;とtarget -=200;のところだけです。

しかしこのように書くとうまくスクロールしません。

Windowsパソコンで作っているのですが、グーグルクロームはおおむね希望通りの動きをします。
しかしFirefoxだとスムーズスクロールせず、直接該当部分に飛びます。
たまにきちんと動くときもありますが、何度も試しているときちんと動かないことが多いです。

Macパソコンでも、グーグルクロームは希望通りの動きをしますが、
ほかのブラウザはすべて挙動がおかしいです。

どのように直せばスムーズに動くようになるのでしょうか？
よろしくお願いします。

Answer 1

クリックイベント発生後に振り分けをすると簡単かと思います。

$(function(){
    $("a[href^='#']:not([href='#'])").click(function () {
	    let w = $(window).width(),
	    	x = 768,
	    	o = w < x ? 80 : 200,
	    	target = $($(this).attr("href")).offset().top - o;
        $("html, body").animate({ scrollTop: target }, 500);
        return false;
    });
});

Comments

[cheshire-cat]

ありがとうございます。
いろいろなブラウザで確認しましたが、とてもスムーズに動いてくれます。
コードも簡潔で、私の書いたコードが恥ずかしいくらいです。