ページトップに戻るスクロールボタンのフェードイン・フェードアウトが効かない

サイト模写を実施しているが、ページをスクロールすると(距離は例えば100px分)ページトップに戻るスクロールボタンがフェードインし、ページトップに戻るとフェードアウトするjsを設定したいが効かない。
ボタンは常に表示されている状態にある。

解決策として、スペルミス等かと考えたが、特に間違いはなさそうである。
クリックするとページトップには戻る。

　解決策または解決のためのヒントをご教示願います。

参考HP　URL：https://isara.life/

html
1        <footer>
2         <div class="footerwrap">
3           <p class="copyright">バンコクのノマドエンジニア育成講座、<a href="https://isara.life/">iSara[イサラ]
4           <br>Copyright © iSara All Rights Reserved.
5          </p>
6           <ul class="sns-btn2">
7             <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">ツイート</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
8             <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v8.0" nonce="p0ajoAhy"></script>
9             <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="button" data-action="like" data-size="small" data-share="true"></div>
10          </ul>
11            <p class="copyright">Designed by / Developed by <a href="https://www.facebook.com/kentaro.koga.7" target="_blank" rel="nofollow">Kentaro Koga</a>
12        </div>
13      </footer>
14      <div id="pagetop"><a href="#">
15        <i class="fa fa-chevron-up fa-3x" data-fa-transform="shrink-8 down-6" aria-hidden="true"></i></a>
16      </div>
17

css
1#pagetop {
2  width: 100px;
3  height: 100px;
4  display: block;
5  background: #fff;
6  position: fixed;
7  right: 0;
8  bottom: 50px;
9  margin-right: 50px;
10}
11#pagetop a {
12  position: relative;
13  display: block;
14  width: 100px;
15  height: 100px;
16  text-decoration: none;
17}
18

js
1jQuery(function() {
2  var pagetop = $('#pagetop');
3  topBtn.hide();
4  $(window).scroll(function() {
5    if($(this).scrollTop() > 100) {
6      topBtn.fadeIn();
7    } else {
8      topBtn.fadeOut();
9    }
10  });
11  pagetop.click(function(){
12    $('body,html').animate({
13      scrollTop: 0
14    }, 500);
15    return false;
16  });
17});
18

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

回答3件

ベストアンサー

変数名が間違ってる。

js
1jQuery(function() {
2//var pagetop = $('#pagetop'); ここ間違い。以下に修正
3  var topBtn = $('#pagetop');
4  topBtn.hide();
5  $(window).scroll(function() {
6    if($(this).scrollTop() > 100) {
7      topBtn.fadeIn();
8    } else {
9      topBtn.fadeOut();
10    }
11  });
12//  pagetop.click(function(){ ここも間違い。以下に修正
13  topBtn.click(function(){
14    $('body,html').animate({
15      scrollTop: 0
16    }, 500);
17    return false;
18  });
19});