ｊＱｕｅｒｙ　ページトップに戻るボタン

jQueryでページにスクロールするとボタンを表示してページトップに戻るようにしたいのですが、ボタン自体が消えてしまいうまくいきません。
Bootstrapを読み込んでいて他でツールチップの処理もしているのですがそれが関係しているのでしょうか？
何度調べてコードを比較しても間違えてるところがなく原因が分からないので質問させていただきました
宜しくお願いいたします。
コードは省略も含めてます。

html
1<body>
2<div id="page_top" style="position:fixed;right:5px;bottom:5px;"><a href="#">↑</a></div>
3
4    <!-- Optional JavaScript -->
5    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
6    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
7    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
8    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
9   <script>
10     $(function () {
11        'use strict';
12        $('[data-toggle="tooltip"]').tooltip();
13
14        var pagetop = $('#page_top');
15
16        pagetop.hide();
17
18        $(window).scroll(function () {
19          if ($(this).scrollTop() > 100) {
20          pagetop.fadeIn(); 
21        } else {
22          pagetop.fadeOut();
23        }
24        });    
25     });
26     </script>
27  </body>
28

kyoya0819

2020/04/16 03:04

コードはこれのみでしょうか？

insomnia00111

2020/04/16 03:16

あとは、本文がありますが、jqueryの処理はこれのみです。何か必要な文面とかありましたらコード貼ります。

insomnia00111

2020/04/16 03:45

再度jQueryをminのソースを追加したところ表示されたのですがページトップでも表示されてしまう形になりました。ちなみに本文はそれなりにスクロールしてみる量は書いてあります。

insomnia00111

2020/04/16 04:04

何度も失礼します。ツールチップの処理を消したところうまく処理されました。明確な原因が分からないのですが、ツールチップの処理は要素の中に直接処理も記入していて、下でscriptタグの中で再度処理をする必要がなかったみたいです。お手数おかけしてすみません。有難うございます。

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

回答1件

ベストアンサー

html
1<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" ・・・・>

jQuery slim を読み込んでいるようですが、ノーマルのjQuery を読み込んだらどうでしょうか。slim はアニメーション関係は省略されています。

サンプルを作成してJQuery の読み込みを下記に変更したら正常に動作しました。

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

jQuery 3.0のスリムビルド版で使えないメソッド等を確認してみた | Another Sky

slim を使うなら、addClass removeClass でクラスを付加、削除して、アニメーションはCSSのtransitionでつけるようにするといいでしょう。

おまけ

jQuery slimビルドでもOKな方法。

css
1#page_top {
2  transition: all .8s;
3  opacity: 0;
4  visibility: hidden;
5}
6
7#page_top.visible {
8  opacity: 1;
9  visibility: visible
10}

js
1   $(function () {
2      'use strict';
3      $('[data-toggle="tooltip"]').tooltip();
4
5      var pagetop = $('#page_top');
6 
7      $(window).scroll(function () {
8        if ($(this).scrollTop() > 100) {
9          pagetop.addClass("visible"); 
10        } else {
11          pagetop.removeClass("visible");
12        }
13      });    
14    });