jQueryでスクロールトップへのボタンを実装したがiPhoneだけ2回押さないと反応しません

jQueryで実装したスクロールトップへのボタンのことで相談です。

サーバーにバーシック認証をかけてアップロードしてみて、実機のiPhoneXで試したところ、スクロールトップへのボタンが2回押さないと反応しません。

なお、手持ちのアンドロイドやデベロッパーツールでは問題なく1回押すだけで反応します。

どうかご教示よろしくお願いいたします。

追記
iPhoneを下まで勢いよくスクロールすると、バウンドするような動きになり、
その間ボタンが効かないようです。

追記2：

自分なりに調べてみたところ、

JavaScript
1$(document).on("click", "#button", function() {
2  // clickイベントの処理
3});

「バインド先を要素を直接指定（$("#button")）から$(document)に変更して、デリゲートの対象を変更。それから、バインドした要素（$(document)）からclickイベント対象の要素を指定することでスムーズに反応してくれるようになりました。」

https://www.terakoya.work/ios-iphone-safari-click-none-howto/

とあるのですが、javascriptにあまり詳しくないため、どこをどのようにしたらいいのかわかりません。

もしわかる方おられましたらぜひ教えてください。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4  <!-- Required meta tags -->
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width,initial-scale=1.0">
7  <link rel="stylesheet" href="css/style.css">
8  <link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
9  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
10  <link href="https://fonts.googleapis.com/css?family=Baloo+2&display=swap" rel="stylesheet">
11  <title>ホームページ</title>
12  
13</head>
14<body>
15<header>
16      
17</header>
18
19
20<div class="flex">
21
22  <div class="main">テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>
23  </div>
24  <div class="left">
25   
26　</div>
27</div>
28
29
30
31
32
33
34
35    
36
37
38<div id="page-top"><a href="#"><i class="fas fa-chevron-up"></i></a></div>
39<footer class="footer">&copy; 2020</footer>
40<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
41
42<script>
43    $( () => {
44        let topBtn = $('#page-top');
45
46        topBtn.hide();
47        
48        $(window).scroll( () => {
49            if ($(this).scrollTop() > 400) {
50                topBtn.fadeIn();
51            } else {
52                topBtn.fadeOut();
53            }
54        });
55        
56        topBtn.click( () => {
57            $('html,body').animate({
58                scrollTop: 0
59            }, 800);
60            return false;
61        });
62    });
63</script>
64
65</body>
66</html>