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をよろしくお願いいたします。

以下もご興味があるかもしれません: