トップに戻るボタンの例の JavaScript 実装

この記事では、トップに戻るボタンを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

アイデア:

まず、固定配置を主に使用してページの下部の特定の位置に固定する静的スタイルを設計します。

.トップに戻る{
    位置: 固定;
    下: 80px;
    右: 80px;
    幅: 80ピクセル;
    高さ: 80px;
    背景色: #ccc;
    フォントサイズ: 20px;
    テキスト配置: 中央;
    上部パディング: 12px;
    ボックスのサイズ: 境界線ボックス;
    カーソル: ポインタ;
    色: #000;
    /* まずボタンを非表示にする */
    表示: なし;
  }

2 つ目は設計ロジックの部分です。マウスが「トップに戻る」ボタンをクリックすると、20 ミリ秒ごとに一定の「速度」でトップに戻ります。トップに戻った後はクリアする必要があります。そうしないと、ページが下に引っ張られるとすぐに自動的にトップに戻ります。ここでは 2 つのメソッドが使用されています。1 つは setInterval、もう 1 つは clearInterval です。前者はタイマーを設定し、後者はタイマーをクリアします。

ここで注意すべき点は、競合を避けるために、タイマーを設定する前に「まずタイマーを設定する」必要があるということです。

最後に、ユーザーエクスペリエンスを向上させるために、現在のページが最上部にある場合は「先頭に戻る」ボタンが自動的に非表示になり、現在のページが最上部でない場合は「先頭に戻る」ボタンが表示されるように設計する必要があります。

最後に、ケース全体を見てみましょう。

<a href="javascript:;" class="backtotop" id="backtotop">トップに戻る</a>

{
    テキスト装飾: なし;
  }

  体 {
    高さ: 5000ピクセル;
  }

  .トップに戻る{
    位置: 固定;
    下: 80px;
    右: 80px;
    幅: 80ピクセル;
    高さ: 80px;
    背景色: #ccc;
    フォントサイズ: 20px;
    テキスト配置: 中央;
    上部パディング: 12px;
    ボックスのサイズ: 境界線ボックス;
    カーソル: ポインタ;
    色: #000;
    /* まずボタンを非表示にする */
    表示: なし;
}

<スクリプト>
（関数（）{
  //要素を取得します var backtotop = document.getElementById('backtotop');

  var タイマー;
  backtotop.onclick = 関数(){
    //タイマーの競合を防ぐために、最初にテーブルを閉じるように設定します。clearInterval(timer);

    //タイマーを設定する timer = setInterval(function(){

      // ルート要素の scrollTop 要素の値を変更します // 互換性の問題 var top = document.documentElement.scrollTop || document.body.scrollTop;
      トップ = トップ - 80;
      ドキュメントのスクロールトップを上部に移動します。
      document.body.scrollTop = 上;

      //if(top <= 0) を判定する {
        //タイマーをオフにする clearInterval(timer);
      }
    },20);
  };

  //ページのスクロールを監視する window.onscroll = function() {
    //スクロール値を取得します var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.scrollY;

    //ページがスクロールされていない場合、先頭に戻るボタンは非表示になります if (scrollTop == 0) {
      backtotop.style.display = 'なし';
    }それ以外 {
        backtotop.style.display = 'ブロック';
    }
  };
})();

<スクリプト>

ページがスクロールしない場合: