トップに戻るボタンを実装するJavaScript

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

1.まず足場を組む

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

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

2. 論理部分

マウスが「トップに戻る」ボタンをクリックすると、50 ミリ秒ごとに一定の「速度」でトップに戻ります。トップに戻った後はクリアする必要があります。そうしないと、ページが下に引っ張られるとすぐに自動的にトップに戻ります。ここでは、setInterval と clearInterval の 2 つのメソッドが使用されます。前者はタイマーを設定するためのもので、後者はタイマーをクリアするためのものです。
ここで注意すべき点は、競合を避けるために、タイマーを設定する前に「まずタイマーを設定する」必要があるということです。
最後に、ユーザーエクスペリエンスを向上させるために、現在のページが最上部にある場合は「先頭に戻る」ボタンが自動的に非表示になり、現在のページが最上部でない場合は「先頭に戻る」ボタンが表示されるように設計する必要があります。

.トップに戻る{
    /* まずボタンを非表示にする */
    表示: なし;
}

（関数（） {
      // 1. 操作する要素を取得します。let oBackBtn = document.querySelector("#backtotop"); 
      // 2. Webページのスクロールを監視する window.onscroll = function() {
                // スクロール距離を取得します。let offsetY = getPageScroll().y;
                // コンソールログ(オフセットY);
 
                // ロールバックボタンを表示するかどうかを決定します if (offsetY >= 200) {
                    oBackBtn.style.display = "ブロック";
                } それ以外 {
                    oBackBtn.style.display = "なし";
                }
            }
 
            timerId を null にします。
 
            // 3. ロールバックボタンのクリックをリッスンする oBackBtn.onclick = function() {
 
                //タイマーの競合を防ぐために、最初にテーブルを閉じるように設定します。clearInterval(timerId);
 
                //タイマーを設定する timerId = setInterval(function() {
                    let begin = getPageScroll().y; //現在の位置 let target = 0; //ターゲット位置 let step = (target - begin) * 0.3;
                    開始 += ステップ;
 
                    //終了するかどうかを判定 if (Math.abs(Math.floor(step)) <= 1) {
 
                        //タイマーをクリアする clearInterval(timerId);
 
                        // window.scrollTo(x, y);
                        // x は Web ページを水平方向にスクロールする位置を示します // y は Web ページを垂直方向にスクロールする位置を示します window.scrollTo(0, 0);
                        戻る;
                    }
 
                    ウィンドウを0にスクロールします。
 
                }, 50);
            };
 
            関数 getPageScroll() {
                x, y とします。
                if (window.pageXOffset) {
                    x = ウィンドウのページXオフセット;
                    y = ウィンドウのYオフセット;
                } そうでない場合 (document.compatMode === "BackCompat") {
                    ドキュメントの左端をスクロールします。
                    ドキュメントの先頭部分をスクロールします。
                } それ以外 {
                    ドキュメント要素の左スクロール。
                    y = document.documentElement.scrollTop;
                }
                戻る {
                    x: x,
                    y: y
                }
            }
        })();