javascriptで画面のトップに戻る機能を作成したい！

Question

実現したいこと

javascriptを利用して、画面トップに戻るボタンを作成したいです。単にボタンを表示させるだけならできたのですが、スクロールした際に、表示されるアニメーションをつけたいと考えてます。

下記のコードでは、ボタンは透明で表示されるのですが、いくらスクロールしても表示されない状態です。.isActiveクラスを追加できていないと思い、

$pagetop.classList.add('isActive');

なども試してみたのですが、機能しませんでした。

該当のソールコード

	<a href="#" class="ScrollTop">PAGE TOP</a>
	<script type="text/javascript" src="/jquery-3.5.1.min.js">
	    let $pagetop = $('.ScrollTop');

            $(window).on( 'scroll', function () {
            if ( $(this).scrollTop() < 40 ) {
                $pagetop.removeClass('isActive');
            } else {
                $pagetop.addClass('isActive');
            }
        });
        $('a[href^="#"]').on('click', function () {
            var href = $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top;
            $("html, body").animate({scrollTop: position}, 550, "swing");
            return false;
        });
	</script>

.ScrollTop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #5bc8ac;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transition: all 0.65s;
}
.ScrollTop.isActive {
  opacity: 1;
  transition: all 0.65s;
}

アドバイス、助言等あればご教授いただきたいです。

Comments

[m.ts10806]

デバッグはされましたか？

[kurokuro]

デバッグしていませんでした。
デバッグしてから投稿すべきですよね。ご指摘ありがとうございます！

[kurokuro]

headerに<script type="text/javascript" src="jquery-3.5.1.min.js"></script>を追加したところ、removeClass(),addClass()がis a functionとエラーが発生しました。なぜ、このエラーが発生するのかがわかりません。

Answer 1

jQueryをダウンロードし、習得したファイルを<header>に入力することで、実行することができました。
ありがとうございました。