TOPに戻るボタンでスクロールを止めたあと規定時間後にボタンを非表示にしたい(再スクロールで再表示)

Question

前提

サイトのリニューアル作業を行っています。
概ね完成して最終調整中なのですが、jqueryを用いたTOPへ戻るボタンの挙動で
追加の処理が必要になりました。

実現したいこと

現在、ページTOPから100pxスクロールするとボタンがfadeInで表示され画面右下に固定、
ページTOPから100px未満まで戻るとfadeOutで非表示、という処理までは入れているのですが
ページ途中でスクロールを止めた際、場所によってTOPへ戻るボタンがジャマになってしまう部分があったため
スクロールを止めて一定時間(ミリ秒単位などで変更できるとありがたいです)経過するとfadeOutし、
再びスクロールを開始するとボタンがfadeInで表示されるといったような処理を追加したいと考えています。

該当のソースコード

  <!-- TOPへ戻るボタン -->
  <div id="page-top">
    <a href="#"><img src="../images/topButton.png" alt="ページトップボタン" /></a>
  </div>
  <!-- /TOPへ戻るボタン -->

#page-top a {
  bottom: 0;
  color: #fff;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1;
}

// TOPへ戻るボタン
$(function () {
  const pageTop = $("#page-top");
  pageTop.hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) { // 100pxスクロールしたら発火
      pageTop.fadeIn(); // 100px以上スクロールしたらボタンをフェードイン
    } else {
      pageTop.fadeOut(); // 100px以下になったらボタンをフェードアウト
    }
  });
  pageTop.click(function () {
    $("body,html").animate(
      {
        scrollTop: 0,
      },
      500 // 500ミリ秒かけてページトップに戻る
    );
    return false;
  });
});

Answer 1

fadeIn処理の後にsetTimeoutを使用して、一定時間経過後にfadeOut(もしくはhide等)を実行するようにするのはいかかでしょうか。
タイムアウト前に再度scrollイベントが発火した場合はclearTimeoutで非表示までのタイマーをリセット可能です。

参考
setTimeout()
clearTimeout()

Answer 2

fadeIn() と fadeOut() は速度とコールバック パラメータを取るので、以下を追加できます:

pageTop.fadeIn(7000);

pageTop.fadeOut(7000);

Comments

[Master0121]

ご回答ありがとうございます。
申し訳ありません、こちらの説明の仕方が悪かったようです。
フェードイン/アウトする時間までの調整ではなく、
一定の位置(今回の設定では100px以上)までページをスクロールさせて
TOPへ戻るボタンが表示されている状態でスクロールを止めたあと
指定時間経過後にフェードアウトでボタンを非表示、かつ再度スクロールを開始することで
ボタンが再表示されるような処理を追加したいという内容でした。