最近のウェブサイトのほとんどはページが長く、4 画面または 5 画面の長さのものもあれば、2 画面または 3 画面の長さのものもあります。ページが長すぎる場合は、ユーザー エクスペリエンスを向上させるために、ページの右側に [先頭に戻る] ボタンが表示され、ユーザーがページをスライドするときに視覚的な画面を回避してすぐに先頭に戻れるようになります。先頭に戻るには、一般的に 4 つの方法があります。 1. アンカー リンクを通じて先頭に戻るには、本文に top というタグを追加する必要があります。 <a href="#top" target="_self">トップに戻る</a> 2. JavaScript を使用して、一番上までスクロールし、水平方向と垂直方向を制御します。 <a href="javascript:scroll(0,0)">JavaScript でトップに戻る<s/a> 3. JavaScript コントロールを使用してゆっくりと上にスライドしますが、十分にスムーズではありません。コードは次のとおりです。 <a onclick="goScrollTop()">JavaScript がゆっくりと上にスライドします</a> 関数 goScrollTop() { // 指定されたピクセル数だけコンテンツをスクロールします (最初のパラメータは右にスクロールするピクセル数、2 番目のパラメータは下にスクロールするピクセル数です) //上方向は負、下方向は正 window.scrollBy(0, -100); // 上方向のスクロール効果をシミュレートするために再帰呼び出しを遅延します scrolldelay = setTimeout('goScrollTop()', 100); // scrollTop 値を取得します。DTD を宣言する標準の Web ページの場合は、document.documentElement.scrollTop を取得します。それ以外の場合は、document.body.scrollTop を取得します。2 つのうち 1 つだけが有効になり、もう 1 つは常に 0 になるため、2 つの値の合計を取得すると、Web ページの実際の scrollTop 値を取得できます。var sTop = document.documentElement.scrollTop + document.body.scrollTop; // ページが最上部に到達したかどうかを判断し、遅延コードをキャンセルします(そうしないと、ページが最上部までスクロールしたときにページを正常に閲覧できなくなります) sTop == 0 の場合、スクロール遅延をクリアします。 } 4. スクロールバーが特定の位置までスクロールすると、それが表示されます。スクロールバーが上方向に戻ると、上方向の先頭に戻るボタンは非表示になります。この方法は、最もよく使用される方法です。 <div class="goTop"> <span>進む</span> </div> jQuery コード: 関数 goTop(min_height) { $(".goTop").click( 関数() { $('html,body').animate({ スクロールトップ: 0 }, 700); }); //ページの最小の高さを取得します。値が渡されない場合、デフォルトは 600 ピクセルです。min_height=min_height?min_height:400; //ウィンドウのスクロールイベントの処理関数をバインドします $(window).scroll(function() { //ウィンドウのスクロールバーの垂直位置を取得します。var s = $(window).scrollTop(); //ウィンドウのスクロールバーの垂直位置がページの最小の高さより大きい場合は、先頭の要素に戻るように徐々に表示し、そうでない場合はフェードアウトします。if (s > min_height) { $(".goTop").fadeIn(100); } それ以外 { $(".goTop").fadeOut(200); } }); } $(関数() { 先頭へ移動します。 }); CSSコード: .トップへ戻る{ 高さ: 40px; 幅: 40px; 背景: 赤; 境界線の半径: 50px; 位置: 固定; 上位: 90% 右:3% 表示: なし; } .goTop スパン { 色: #fff; 位置: 絶対; 上: 12px; 左: 8px; } CSS のトップに戻るコード例に関するこの記事はこれで終わりです。CSS のトップに戻るコンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 著者:FlyElephant |
<<: Html+CSS フローティング広告ストリップの実装
>>: 優れた Web UI ライブラリ/フレームワーク 10 選
CSSスタイルとHTMLタグ要素を使用するさまざまな HTML タグに点線の境界線を追加するために、...
序文: Webサービスを提供するために、Alibabaクラウドホストを新しくインストールしました。す...
1. Flexレイアウトの紹介Flex は Flexible Box の略で、「柔軟なレイアウト」を...
前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...
私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...
スクリプトを書く目的は、さまざまなサービスを手動で起動しなくて済むようにすることです(怠惰のためでも...
1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...
1. はじめになぜインデックスが必要なのでしょうか?一般的なアプリケーション システムでは、読み取り...
目次序文1. 公式サイトからMySQL 8.0.22をダウンロードする2. 環境変数を設定する3. ...
Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリ、my-...
ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...
目次mysql マスタースレーブレプリケーションMySQL マスタースレーブレプリケーション方式My...
1. 目的この記事を通じて、誰もがフロートをクリアする原理と方法を理解し、最終的にこの記事が最良であ...
目次JSIとはJSIの違いiOS で JSI を使用するiOS 設定RN側の構成jsはパラメータ付き...
目次序文分析する初期レンダリング方法初期最適化さらなる最適化方法2序文ほとんどのミニプログラムには、...