jQueryの修正がしたいです。紹介サイトの方法を実践する方法をご教示ください。

iPhone、iPadにてTOPへ戻るボタンの挙動がおかしい（2度押ししないと機能しない）ため、jQueryの修正をしたいと思っています。

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

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

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

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

以下コードを掲載します。

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

以下、自分の実装したjQuery（HTML内下部にて記述）

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<div id="page-top"><a href="#"><i class="fas fa-chevron-up"></i></a></div>
30<footer class="footer">&copy; 2020</footer>
31<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
32
33<script>
34    $( () => {
35        let topBtn = $('#page-top');
36
37        topBtn.hide();
38
39        $(window).scroll( () => {
40            if ($(this).scrollTop() > 400) {
41                topBtn.fadeIn();
42            } else {
43                topBtn.fadeOut();
44            }
45        });
46
47        topBtn.click( () => {
48            $('html,body').animate({
49                scrollTop: 0
50            }, 800);
51            return false;
52        });
53    });
54</script>
55
56</body>
57</html>

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

回答1件

ベストアンサー

このようか形でいかがでしょうか?

案1:

HTML
1<!-- まずは<a>タグを抜いてみてください。 -->
2<div id="page-top"><i class="fas fa-chevron-up"></i></div>

JS
1// #buttonではなく#page-topではないですか?
2$(document).on("click", "#page-top", function() {
3  $('html,body').animate({
4    scrollTop: 0
5  }, 800);
6  
7  return false;
8});

HTML側で、まずは<a>タグを抜いてみて、うまく動いたら<a>タグを戻してみてください。
(<a>タグがあると、アニメーションがうまく動かないような気がします。)

案2:追記です。 <a>タグを消さなくても、以下のような書き方だとうまくいくかもしれません。

HTML
1<!-- HTMLはそのまま手を加えない -->
2<div id="page-top"><a href="#"><i class="fas fa-chevron-up"></i></a></div>

JS
1$(document).on("click", "#page-top a", function() {
2  $('html,body').animate({
3    scrollTop: 0
4  }, 800);
5  
6  return false;
7});

投稿2020/04/07 04:22

編集2020/04/07 04:30

new1ro

総合スコア4528

NAKAZAKI

2020/04/07 05:35

ご回答ありがとうございます！挙げていただいた方法を試しましたが、やはり2回ボタンを押さないとトップへ戻る機能が働かないようです。 iPhoneヘビーユーザーに聞くと「よくあることだから気にも留めていない」との意見もありましたので、とりあえずこのままにしておいて様子をみてみようかと思います。お時間取ってくださり、ありがとうございました！

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