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

トップに戻るボタンを実装する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
                }
            }
        })(); 

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • トップに戻るボタンの例の JavaScript 実装
  • JavaScript は WeChat ブラウザを監視し、戻るボタンの時間を表示します
  • Javascript に基づいてトップに戻るボタンを実装する
  • JavaScriptのトップに戻るボタンを実装する方法
  • JavaScript でトップに戻るボタンを実装する
  • JavaScript を使用してブラウザの戻るボタンをブロックする方法
  • JavaScriptはブログページの右下隅にトップに戻るボタンを実装します
  • JSはそれぞれ画像とボタンを介して前のページの例コードに戻ります
  • js ボタンをクリックすると別のページがポップアップし、値を選択して現在のページに戻ります
  • JavaScript ポップアップ フォームのボタンをクリックして選択したデータを返す実装

<<:  MySQL スロークエリログの詳細な理解

>>:  IIS を使用して X-Forwarded-For ヘッダー (XFF) を呼び出して訪問者の実際の IP を記録する 2 つの方法

推薦する

mysql ビュー関数の分析と使用例

この記事では、例を使用して MySQL ビューの機能と使用方法を説明します。ご参考までに、詳細は以下...

JVM 上の高性能データ形式ライブラリ パッケージである Apache Arrow の紹介とアーキテクチャ (Gkatziouras)

Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...

少なくともn日間連続してログインしているユーザーに対するSQLクエリ

MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...

MySQLデータベースはsysbenchに基づくOLTPベンチマークテストを実装します

Sysbench は、MySQL データベース ストレージ エンジン InnoDB のディスク I/...

JavaScript で一意の ID を生成するいくつかの方法

考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...

CSS3で線形グラデーションを実装するためのコードの詳細な説明

序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...

JavaScript における一般的な配列操作

目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....

Vueはデータを初期状態にリセットします

場合によっては、データ内のデータを再利用する必要がありますが、データ内のデータはさまざまなフォーム、...

CentOS 7.9 の zabbix5.0.14 のインストールと設定プロセス

目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...

計算機機能を実現するjsバージョン

この記事の例では、計算機機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な...

CSSプロパティに基づいたボタンホバーボーダーと背景アニメーションのコレクション

ハートの属性不透明度: .999 は要素のスタッキングコンテキストを作成し、ボタン6と8のアニメーシ...

MySQL の詳細な単一テーブルの追加、削除、変更、クエリの CRUD ステートメント

MySQL の追加、削除、変更、クエリステートメント1. 練習シートを作成するここでの練習表は3つの...

Linux コマンドラインで他のユーザーと通信する方法

Linux のコマンドラインで他のユーザーにメッセージを送信するのは簡単です。これを行うコマンドは多...

HTML 内の input type="reset" タグが無効 (機能しない) である理由として考えられるもの。

<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...