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

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

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

HTML
1<header id="header">
2    <a href="#main">ホームページタイトル</a>
3    <nav>
4        <ul>
5            <li><a href="#features">特徴</a></li>
6            <li><a href="#price">価格</a></li>
7            <li><a href="#contact">お問い合わせ</a></li>
8            <li><a href="#footer">フッター</a></li>
9        </ul>
10    </nav>
11</header>
12<div id="main">メイン</div>
13<div id="features">特徴</div>
14<div id="price">価格</div>
15<div id="contact">お問い合わせ</div>
16<footer id="footer">フッター</footer>

CSS
1#main,#features,#price,#contact,#footer {
2    height: 500px;
3}

jQuery
1$(function () {
2
3    $("a[href^='#']:not([href='#'])").click(function () {
4        var target = $($(this).attr("href")).offset().top;
5        target -= 80;
6        $("html, body").animate({ scrollTop: target }, 500);
7        return false;
8    });
9
10});

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

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

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

jQuery
1$(function () {
2
3    $(window).on('load resize', function () {
4
5        var w = $(window).width();
6        var x = 768;
7
8        if (w < x) {
9            $("a[href^='#']:not([href='#'])").click(function () {
10                var target = $($(this).attr("href")).offset().top;
11                target -= 80;
12                $("html, body").animate({ scrollTop: target }, 500);
13                return false;
14            });
15        } else {
16            $("a[href^='#']:not([href='#'])").click(function () {
17                var target = $($(this).attr("href")).offset().top;
18                target -= 200;
19                $("html, body").animate({ scrollTop: target }, 500);
20                return false;
21            });
22        }
23
24    });
25
26});

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

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

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

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

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

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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