最近のウェブサイトのほとんどはページが長く、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 選
UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...
1. vue-cli がプロジェクト パッケージを作成した後にページが空白になる問題の解決方法コマン...
リンクインスタイルとは、すべてのスタイルを 1 つ以上の外部スタイルシート ファイルに配置することで...
操作については、こちらの公式ドキュメントを参照してください。インストール1. 古いバージョンの do...
戦争パッケージを準備する1. 既存のSpringBootプロジェクトを準備し、pomに依存関係を追加...
Linux コマンドの学習は、ほとんどの初心者にとって最大の障害です。今日は、Linux システムで...
目次1. はじめに2. インターフェース3. 簡単な例4. 結論1. はじめにMDN の公式 Web...
テーブルとは何ですか?セルセルで構成されています。表では、<td> の数は、<tr...
最近、毎日変更されるページを iframe を使用して呼び出す必要があるプロジェクトがあります。その...
問題を見つけるまず問題を見てみましょう。ミニプログラムでは、Vant のダイアログ コンポーネント ...
目次序文ホットチェンジとはCocos Hot アップデートの概要マニフェストプロジェクトリソースとゲ...
序文多くの Web アプリケーションは、リレーショナル データベース管理システム (RDBMS) に...
1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...
node を D ドライブにインストールしましたが、C ドライブのスペースを占有したくなかったため、...
フォームは、get と post の 2 つのデータ転送方法を提供します。どちらもデータを送信する方...