トップに戻るボタンを実装する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 つの方法

推薦する

IE ラベル LI テキスト折り返し問題について

私は長い間この問題に悩まされていましたが、検索してみたところ、実際にこの問題を解決した人がいることが...

CSS と Bootstrap アイコンを使用して、上下にジャンプするインジケーター矢印のアニメーション効果を作成します。

ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になるこ...

css n番目から始まるすべての要素を取得する

具体的なコードは次のとおりです。 <div id="ボックス"> &...

CSSカウンター関連属性の学習の詳細な説明

CSS カウンター属性はほぼすべてのブラウザ (IE8 を含む) でサポートされていますが、あまり使...

ffmpeg コマンドラインを使用してビデオを変換するためのサンプルコード

この記事の本文を始める前に、まず ffmpeg プログラムをインストールする必要があります (Lin...

JS のオブジェクトリテラルの詳細な説明

目次序文1. オブジェクト構築にプロトタイプを設定する1.1 __proto__ の使用における特殊...

JS で async と await を使用する方法

目次1. 非同期2. 待つ: 3. 包括的なアプリケーション1. 非同期async 、非同期コードが...

Ubuntu 18.04 での Pycharm インストール チュートリアルの実装

方法1: Pycharmをダウンロードしてインストールするダウンロードアドレス: https://w...

Linux sar コマンドの使用方法とコード例の分析

1. CPU使用率sar -p (一日中表示) sar -u 1 10 (1: 1秒ごと、10: 1...

CSS フレックスベースのテキストオーバーフロー問題の解決方法

重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題...

CSS ピックアップ矢印、カタログ、アイコン実装コード

1. CSS その他のアイコンアイコンを作成するには 3 つの方法があります。写真css (小さな矢...

VMware 仮想マシンのインストール win7 オペレーティング システム チュートリアル ダイアグラム

VMwareaのインストールプロセスは説明しませんが、主にwin7イメージをロードする方法を説明しま...

シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

CSS3 で transform を使用した場合のフォントぼかしの解決方法の詳細な説明

この質問は非常に奇妙なので、あまり多くを語らずにコードに直接進みます。 .g-ダイアログラッパー{ ...