jQueryとCSSを組み合わせてトップに戻る機能を実現

jQueryとCSSを組み合わせてトップに戻る機能を実現

CSS操作

CS
        $("").css(名前|プロ|[,値|関数])
    位置$("").offset([座標])
        $("").位置()
        $("").scrollTop([val])
        $("").scrollLeft([val])
    サイズ $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([オプション])
        $("").outerWidth([オプション])

例 トップに戻る

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <script src="js/jquery-2.2.3.js"></script>
    <スクリプト>


          window.onscroll=関数(){

              var current=$(window).scrollTop();
              console.log(現在)
              (現在値>100)の場合{

                  $(".returnTop").removeClass("非表示")
              }
              それ以外 {
              $(".returnTop").addClass("非表示")
          }
          }


           関数 returnTop(){
// $(".div1").scrollTop(0);

               $(ウィンドウ).スクロールトップ(0)
           }




    </スクリプト>
    <スタイル>
        体{
            マージン: 0px;
        }
        .returnTop{
            高さ: 60px;
            幅: 100ピクセル;
            背景色: ダークグレー;
            位置: 固定;
            右: 0;
            下部: 0;
            色:緑黄色;
            行の高さ: 60px;
            テキスト配置: 中央;
        }
        .div1{
            背景色: 蘭色;
            フォントサイズ: 5px;
            オーバーフロー:自動;
            幅: 500ピクセル;
        }
        .div2{
            背景色: ダークシアン;
        }
        .div3{
            背景色: 水色;
        }
        .div{
            高さ: 300px;
        }
        。隠れる{
            表示: なし;
        }
    </スタイル>
</head>
<本文>
     <div class="div1 div">
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>
         <p>こんにちは</p>

     </div>
     <div class="div2 div"></div>
     <div class="div3 div"></div>
     <div class="returnTop hide" onclick="returnTop();">トップに戻る</div>
</本文>
</html>
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
        }
        .div1{
            高さ: 100px;
            幅: 100ピクセル;
            背景色: 赤;
        }
        .div3{
            高さ: 120px;
            幅: 120ピクセル;
            背景色: 海緑;
        }
        .div2{
            位置: 相対的;
        }
        .div4{
            背景色: アクアマリン;
            幅: 150ピクセル;
            高さ: 150px;
            パディング: 5px;
            マージン: 6px;
            境界線: 4px 緑
        }

        .div5{
            幅: 50%;
            高さ: 200px;
            オーバーフロー:自動;
        }
        .div6{
            幅: 100%;
            高さ: 1000ピクセル;
        }
        .div5{
            背景色: アクアマリン;
        }
        .div6{
            背景色: チョコレート;
        }
        .div7{
            幅: 90ピクセル;
            高さ: 60px;
            位置: 固定;
            右: 20px;
            下: 20px;
            背景色: 黄色;
            テキスト配置: 中央;
            /*テキストを水平方向に中央揃えにする*/
            行の高さ: 60px;
            /*テキスト行の高さ*/
        }
        。隠れる{
            表示: なし;
        }
    </スタイル>
</head>
<本文>
<!-- <div class="div1"></div>-->
<!-- <div class="div2">-->
<!-- <div class="div3"></div>-->
<!-- </div>-->
<!-- <div class="div4"></div>-->

<!-- <script src="jquery-3.3.1.js"></script>-->
<!-- <スクリプト>-->
<!-- // ビューポートからのオフセットを計算します -->
<!-- console.log($('.div1').offset().left); // 0-->
<!-- console.log($('.div1').offset().top); // 0-->
<!-- console.log($('.div3').offset().left); // 0-->
<!-- console.log($('.div3').offset().top); // 100-->

<!-- // 配置された親タグからのオフセットを計算します (すでに配置されていることに注意してください) -->
<!-- console.log($('.div3').position().left); // 0-->
<!-- console.log($('.div3').position().top); // 0-->

<!-- // ラベルのサイズを計算-->
<!-- console.log($('.div4').height()); // 150(幅: 150px)-->
<!-- // console.log($('.div4').height('200px')) // 高さが 200px になります -->
<!-- console.log($('.div4').innerHeight()); // 160(幅: 150px+パディング: 5px+パディング: 5px)-->
<!-- console.log($('.div4').outerHeight()); // 168(幅: 150px+パディング: 5px+パディング: 5px+ボーダー: 4px+ボーダー: 4px)-->
<!-- console.log($('.div4').outerHeight(true)); // 180(幅: 150px+パディング: 5px+パディング: 5px+ボーダー: 4px+ボーダー: 4px+マージン: 6px+マージン: 6px)-->
<!-- </script>-->


    <!--スクロール バー モニターと最上位インスタンスへの戻り-->
    <div class="div5">
        <h1>こんにちは</h1>
        <h1>こんにちは</h1>
        <h1>こんにちは</h1>
        <h1>こんにちは</h1>
        <h1>こんにちは</h1>
        <h1>こんにちは</h1>
        <h1>こんにちは</h1>
        <h1>こんにちは</h1>
        <h1>こんにちは</h1>
        <h1>こんにちは</h1>
    </div>
    <divクラス="div6">
        <button onclick="returnTop1()">戻る</button>
    </div>
    <div class="div7 hide" onclick="returnTop()">トップに戻る</div>

    <script src="jquery-3.3.1.js"></script>
    <スクリプト>
        window.onscroll = 関数 () {
            // onscroll イベントは、要素のスクロール バーがスクロールしているときにトリガーされます (ウィンドウ オブジェクト イベント)
            let num=$(window).scrollTop(); // 左と右のスクロールバーはscrollLeftです
            // scrollTop() メソッドは、一致した要素のスクロールバーの垂直位置を返すか設定します (jquery)
            console.log(数値);
            (数値>100)の場合{
                $('.div7').removeClass('非表示');
            }それ以外{
                $('.div7').addClass('非表示');
            };
        };
        関数 returnTop() {
            $(ウィンドウ).scrollTop(0);
        };
        関数 returnTop1() {
            $('.div5').scrollTop(0);
        };
    </スクリプト>
</本文>
</html>

インスタンス拡張:

CS: ...

.backToTop {
表示: なし;
幅: 18px;
行の高さ: 1.2;
パディング: 5px 0;
背景色: #000;
色: #fff;
フォントサイズ: 12px;
テキスト配置: 中央;
位置: 固定;
_位置: 絶対;
右: 10px;
下: 100px;
_bottom: "自動";
カーソル: ポインタ;
不透明度: .6;
フィルター: アルファ(不透明度=60);
}

jQuery コード

 
(関数() { 
var $backToTopTxt = "先頭に戻る", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) 
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() { 
$("html, body").animate({ scrollTop: 0 }, 120); 
})、$backToTopFun = 関数() { 
var st = $(document).scrollTop(), winh = $(window).height(); 
(st > 0)? $backToTopEle.show(): $backToTopEle.hide(); 
//IE6での場所 if (!window.XMLHttpRequest) { 
$backToTopEle.css("top", st + winh - 166); 
} 
}; 
$(window).bind("スクロール", $backToTopFun); 
$(function() { $backToTopFun(); }); })();: 

jQueryとCSSを使用してトップに戻る機能を実装する方法についての記事はこれで終わりです。jQueryとCSSの操作の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • jQuery と CSS でシンプルなトップへの戻り効果を実現

<<:  Centos7 システムでの MySQL マスター スレーブ同期構成スキーム

>>:  VMware 仮想マシンでの CentOS7 ネットワーク構成 (ホストのワイヤレス インターネット アクセス)

推薦する

jsはフォーム検証機能を実装します

この記事の例では、フォーム検証機能を実装するためのjsの具体的なコードを参考までに共有しています。具...

Linux でシェル スクリプトを使用して jar パッケージ プロジェクトを展開するための完全な手順

1. JDKをインストールする コンピュータの動作桁を確認します。 uname -ar 2017 x...

IE6/7 は混乱するだろう: 空のテキスト ノードの高さの問題

序文: ietester でドキュメント コードを表示するには、debugbar を使用します。すべ...

Nodejsはgitee実装コードに自動的に同期するドキュメント同期ツールを作成します

本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...

HTML の基本的な使用法には、リンク、スタイルシート、span、div などが含まれます。

1. リンクハイパーテキスト リンクは HTML において非常に重要です。基本的な形式は次のとおりで...

MySQL 8.0.15 のインストールと設定のグラフィックチュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

IIS を使用して X-Forwarded-For ヘッダー (XFF) を呼び出して訪問者の実際の IP を記録する 2 つの方法

問題: IIS を通じて公開された Web サイトは F5 デバイスの背後に配置されています。透過的...

Vue における属性とプロパティの具体的な使用法と違い

目次Vue.jsにおける属性とプロパティ値および関連する処理として属性とプロパティの概念属性とプロパ...

jsは水平および垂直スライダーを実現します

最近、練習プロジェクトをしていたときにスライダーを使う必要があったので、調べてみました。まず、水平ス...

よく知られているブラウザのDOCTYPEモード選択メカニズム

ドキュメントの範囲この記事では、Firefox やその他の Gecko ベースのブラウザ、Safar...

Centos7 に yum を使用して MySQL をインストールし、リモート接続を実現する方法

Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...

type="file" の入力ボックスのスタイル変更の概要

入力タイプ「file」とは何ですか?これが何なのかは説明する必要はないと思います。誰もが知っているこ...

HTML入力ファイルコントロールはアップロードされるファイルの種類を制限します

入力ファイルの HTML コントロールを Web ページに追加します。 <input id=&...

html5 の新しいメソッドを使用して JavaScript で要素クラス名を操作する方法の詳細な説明

目次1. classList属性2. 実用化以前の JavaScript では、最初にクラス属性を取...