ページトップへスクロールさせる時に画像が消えない現象を改善したい

###実現したいこと
ページスクロールさせるときに、クリックした画像が消えるように実装したいです。
後述する「現状」④の状態を改善したいです。

###現状
ページスクロール自体は正常に動作しています。
画像をクリックすると以下の順に画像が展開されてしまいます。
①画像をクリック
②画像が一瞬消える
③ページスクロールされる
④画像が一瞬表示される←改善したい点
⑤画像が消える

###試したこと
js

$(function() {
      // #back-to-topを消す
      $('#back-to-top').hide();

      // スクロールが十分されたら#back-to-topを表示、スクロールが戻ったら非表示
      $(window).scroll(function() {
          $('#pos').text($(this).scrollTop());
          if ($(this).scrollTop() > 60) {
              $('#back-to-top').fadeIn();
          } else {
              $('#back-to-top').fadeOut();
          }
      });

      // #back-to-topがクリックされたら上に戻る
      $('#back-to-top a').click(function() {
          $('html, body').animate({
              scrollTop:0
          }, 500);
          return false;
      });
  });

色々試したのですが、想定外の動作が起きたりと分からない状況が続き、質問させていただきました。
分かる方がいらっしゃいましたら、ご教授願います。

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

回答2件

解決したとのことですが、scrollは文字通りスクロールするたびに発火し続けます。今のコードだとfadeIn()もしくはfadeOut()のいずれかが常に発火し続けるので処理の無駄に感じます。Flagで状態管理すると各メソッドが必要なタイミングで1度だけ発火するので処理の無駄になりません。ご検討ください。

Javascript
1$(function() {
2      // #back-to-topを消す
3      $('#back-to-top').hide();
4
5      // スクロールが十分されたら#back-to-topを表示、スクロールが戻ったら非表示
6      var isVisibleObj = false;
7      $(window).scroll(function() {
8          $('#pos').text($(this).scrollTop());
9          if (!isVisibleObj && $(this).scrollTop() > 60) {
10              $('#back-to-top').fadeIn();
11              isVisibleObj = true;
12          } else if (isVisibleObj && $(this).scrollTop() <= 60){
13              $('#back-to-top').fadeOut();
14              isVisibleObj = false;
15          }
16      });
17
18      // #back-to-topがクリックされたら上に戻る
19      $('#back-to-top a').click(function() {
20        $('#back-to-top').fadeOut();
21        isVisibleObj = false;
22          $('html, body').animate({
23              scrollTop:0
24          }, 500);
25          return false;
26      });
27});