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 選

推薦する

HTML で点線の境界線を設定する方法

CSSスタイルとHTMLタグ要素を使用するさまざまな HTML タグに点線の境界線を追加するために、...

Alibaba Cloud Centos6.X でメールを送信する際に発生するさまざまな問題

序文: Webサービスを提供するために、Alibabaクラウドホストを新しくインストールしました。す...

Flexレイアウトとスケーリング計算についての簡単な説明

1. Flexレイアウトの紹介Flex は Flexible Box の略で、「柔軟なレイアウト」を...

Windows 7 環境での Docker 高速ビルドと Alibaba Cloud コンテナ高速化構成の詳細な説明

前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...

DockerコンテナのIPアドレスを表示する方法

私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...

Ubuntu で起動時に自動的に起動するシェル スクリプトを作成する (推奨)

スクリプトを書く目的は、さまざまなサービスを手動で起動しなくて済むようにすることです(怠惰のためでも...

検索エンジンのウェブサイトの入り口の無料コレクション

1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...

MySQL インデックスの正しい使い方とインデックスの原理の詳細な説明

1. はじめになぜインデックスが必要なのでしょうか?一般的なアプリケーション システムでは、読み取り...

MySQL 8.0.22 の最新バージョンのダウンロードとインストールの超詳細なチュートリアル (Windows 64 ビット)

目次序文1. 公式サイトからMySQL 8.0.22をダウンロードする2. 環境変数を設定する3. ...

mysql5.7 以降で my.ini を設定するための詳細な手順

Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリ、my-...

ubuntu20.04 LTSにdockerをインストールする方法

ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...

MySQL マスタースレーブレプリケーションの実装手順

目次mysql マスタースレーブレプリケーションMySQL マスタースレーブレプリケーション方式My...

CSS3 クリアフロートメソッドの例

1. 目的この記事を通じて、誰もがフロートをクリアする原理と方法を理解し、最終的にこの記事が最良であ...

React Native JSIはRNとネイティブ通信のサンプルコードを実装します

目次JSIとはJSIの違いiOS で JSI を使用するiOS 設定RN側の構成jsはパラメータ付き...

WeChatミニプログラムでの仮想リストの実装例

目次序文分析する初期レンダリング方法初期最適化さらなる最適化方法2序文ほとんどのミニプログラムには、...