この記事では、トップに戻るボタンを実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: IIS を使用して X-Forwarded-For ヘッダー (XFF) を呼び出して訪問者の実際の IP を記録する 2 つの方法
この記事では、例を使用して MySQL ビューの機能と使用方法を説明します。ご参考までに、詳細は以下...
Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...
MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...
Sysbench は、MySQL データベース ストレージ エンジン InnoDB のディスク I/...
springmvc による Spring の統合Spring 統合 springmvc の web....
考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...
序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...
目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....
場合によっては、データ内のデータを再利用する必要がありますが、データ内のデータはさまざまなフォーム、...
目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...
この記事の例では、計算機機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な...
ハートの属性不透明度: .999 は要素のスタッキングコンテキストを作成し、ボタン6と8のアニメーシ...
MySQL の追加、削除、変更、クエリステートメント1. 練習シートを作成するここでの練習表は3つの...
Linux のコマンドラインで他のユーザーにメッセージを送信するのは簡単です。これを行うコマンドは多...
<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...