CSS トップに戻る コード例

CSS トップに戻る コード例

最近のウェブサイトのほとんどはページが長く、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
出典: http://www.cnblogs.com/xiaofeixiang

<<:  Html+CSS フローティング広告ストリップの実装

>>:  優れた Web UI ライブラリ/フレームワーク 10 選

推薦する

Reactは動的ポップアップウィンドウコンポーネントを実装します

UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...

Vue パッケージ化後の空白ページの解決策

1. vue-cli がプロジェクト パッケージを作成した後にページが空白になる問題の解決方法コマン...

CSS スタイルを HTML 外部スタイルシートにインポートする方法

リンクインスタイルとは、すべてのスタイルを 1 つ以上の外部スタイルシート ファイルに配置することで...

Centos7 に Docker をインストールします (2020 の最新バージョンが利用可能、コピーして貼り付けるだけ)

操作については、こちらの公式ドキュメントを参照してください。インストール1. 古いバージョンの do...

Tomcat を使用して Centos 環境に SpringBoot WAR パッケージをデプロイする

戦争パッケージを準備する1. 既存のSpringBootプロジェクトを準備し、pomに依存関係を追加...

初心者向けの一般的な Linux システムコマンドの完全なリスト

Linux コマンドの学習は、ほとんどの初心者にとって最大の障害です。今日は、Linux システムで...

JavaScript リフレクション学習のヒント

目次1. はじめに2. インターフェース3. 簡単な例4. 結論1. はじめにMDN の公式 Web...

表のセル間隔とセルパディングの違いの詳細な説明

テーブルとは何ですか?セルセルで構成されています。表では、<td> の数は、<tr...

iframeを使用してページを呼び出すとページがキャッシュされるかどうかの簡単な分析

最近、毎日変更されるページを iframe を使用して呼び出す必要があるプロジェクトがあります。その...

WeChatアプレットの入力ジッター問題を解決する方法

問題を見つけるまず問題を見てみましょう。ミニプログラムでは、Vant のダイアログ コンポーネント ...

CocosCreatorのホットアップデートの包括的な説明

目次序文ホットチェンジとはCocos Hot アップデートの概要マニフェストプロジェクトリソースとゲ...

キャッシュサーバーを構築するためのMemcached方式

序文多くの Web アプリケーションは、リレーショナル データベース管理システム (RDBMS) に...

HTML における Div と table の違い (あらゆる側面から詳細に説明)

1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...

npm グローバル モジュールのデフォルトのインストール パスを変更するためにノードのインストールをカスタマイズする手順

node を D ドライブにインストールしましたが、C ドライブのスペースを占有したくなかったため、...

フォームのmethod=post/getの違い

フォームは、get と post の 2 つのデータ転送方法を提供します。どちらもデータを送信する方...