この記事では、トップに戻るボタンを実装するための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 つの方法
私は長い間この問題に悩まされていましたが、検索してみたところ、実際にこの問題を解決した人がいることが...
ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になるこ...
具体的なコードは次のとおりです。 <div id="ボックス"> &...
CSS カウンター属性はほぼすべてのブラウザ (IE8 を含む) でサポートされていますが、あまり使...
この記事の本文を始める前に、まず ffmpeg プログラムをインストールする必要があります (Lin...
目次序文1. オブジェクト構築にプロトタイプを設定する1.1 __proto__ の使用における特殊...
目次1. 非同期2. 待つ: 3. 包括的なアプリケーション1. 非同期async 、非同期コードが...
方法1: Pycharmをダウンロードしてインストールするダウンロードアドレス: https://w...
1. CPU使用率sar -p (一日中表示) sar -u 1 10 (1: 1秒ごと、10: 1...
重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題...
1. CSS その他のアイコンアイコンを作成するには 3 つの方法があります。写真css (小さな矢...
VMwareaのインストールプロセスは説明しませんが、主にwin7イメージをロードする方法を説明しま...
この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...
この記事では、例を使用して、MySQL イベントの変更 (ALTER EVENT)、イベントの無効化...
この質問は非常に奇妙なので、あまり多くを語らずにコードに直接進みます。 .g-ダイアログラッパー{ ...