HTML ページの先頭に戻るいくつかの実装の概要

最近、ウェブサイトを開発する際にトップに戻るボタンを作成する必要がありますが、私は主にバックエンドの開発に従事しており、フロントエンドにはあまり精通していません。オンラインで検索した後、トップに戻るボタンを作成しました。ここでは、それらを記録するための2つの簡単な方法を紹介します。このWebサイトを気に入った友人は、ブックマークすることができます。学習資料は随時更新されます。

1つ目: 外部jQueryを参照する

新しい HTML ページを作成し、次のコードをコピーして保存し、ブラウザーで開いて効果を確認します。

<!doctypehtml>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    .矢印{
        境界線: 9px 透明実線;
        境界線下部の色: #3DA0DB;
        幅: 0px;
        高さ: 0px;
        上:0ピクセル
    }
    。スティック{
        幅: 8px;
        高さ: 14px;
        境界線の半径: 1px;
        背景色: #3DA0DB;
        上:15px;
    }
    #back_top div{
        位置: 絶対;
        マージン: 自動;
        右: 0px;
        左: 0px;
    }
    #戻る_トップ{
        背景色: #dddddd;
        高さ: 38px;
        幅: 38px;
        境界線の半径: 3px;
        表示: ブロック;
        カーソル: ポインタ;
        位置: 固定;
        右: 50px;
        下: 100px;
        表示: なし;
    }
</スタイル>
</head>
<本文>




<div id="記事"></div>
<div id="back_top">
<div class="arrow"></div>
<div class="stick"></div>
</div>
<script src="http://cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js"></script>
<スクリプト>
$(関数(){
    (var i =0;i <100;i++){
        $("#article").append("<p>xxxxxxxxx<br></p>")
    }

})
</スクリプト>
<スクリプト>
$(関数(){

    $(window).scroll(function(){ //ウィンドウがスクロールする限り、次のコードがトリガーされます var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //スクロール後の高さを取得します if( scrollt >200 ){ //スクロール後の高さが200pxを超える場合は、表示します $("#back_top").fadeIn(400); //フェードインします }else{

            $("#back_top").stop().fadeOut(400); // 戻ったり超過しなかったりした場合はフェードアウトします。前のアニメーションを停止するには stop() を追加する必要があります。そうしないと、点滅します。}

    });

    $("#back_top").click(function(){ //ラベルをクリックすると、animate を使用して 200 ミリ秒以内に上部にスクロールします$("html,body").animate({scrollTop:"0px"},200);

    }); 

});
</スクリプト>
</本文>
</html>

2番目の方法：CSSと特別なアイコンを使用して設定する

コード全体は、シンプルで美しい「先頭に戻る」ボタンを作成します。上記と同じように、コードを HTML ファイルにコピーして開き、効果を確認します。

<!doctypehtml>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    #戻る_トップ{ 
    表示:ブロック;  
    幅:60ピクセル; 
    高さ:60px;
    位置:固定;  
    下:50px;  
    右:40px; 
    境界線の半径:10px 10px 10px 10px;   
    テキスト装飾:なし;  
    表示:なし;  
    背景色:#999999;     
    }
    #back_top スパン{ 
        表示:ブロック; 
        幅:60ピクセル; 
        色:#dddddd; 
        フォントサイズ:40px; 
        テキスト配置:中央; 
        上マージン:4px;
    } 
    #back_top span:hover{ 
        色:#cccccc; 
    } 
</スタイル>
</head>
<本文>




<div id="記事"></div>

<a id="back_top" href="script:;">   
  <span>⌆</span> 
</a>
</div>
<スクリプト>
$(関数(){
    (var i =0;i <100;i++){
        $("#article").append("<p>xxxxxxxxx<br></p>")
    }

})
</スクリプト>
<スクリプト>
$(関数(){
    $(window).scroll(function(){ //ウィンドウがスクロールする限り、次のコードがトリガーされます var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //スクロール後の高さを取得します if( scrollt >200 ){ //スクロール後の高さが200pxを超える場合は、表示します $("#back_top").fadeIn(400); //フェードアウトします }else{      
            $("#back_top").stop().fadeOut(400); // 戻ったり超過しなかったりした場合はフェードインします。前のアニメーションを停止するには stop() を追加する必要があります。そうしないと、点滅します。}
    });
    $("#back_top").click(function(){ //ラベルをクリックすると、animate を使用して 200 ミリ秒以内に上部にスクロールします$("html,body").animate({scrollTop:"0px"},200);
    });
});
</スクリプト>
</本文>
</html>

上記の 2 つの方法はアイデアを提供するだけであり、直接使用することも、必要な特定のアイコンを自分でデバッグすることもできます。皆様の学習に役立つことを願っています。また、皆様が 123WORDPRESS.COM を応援してくれることを願っています。

<<: MySQL ストアド関数の詳細な紹介

>>: CSSの絶対と相対について