jQueryを使ってページを先頭に戻す方法（コード添付）

Web サイトを閲覧しているときに、ページを下にスライドすると、[トップに戻る] ボタンが表示されることに気づきましたか? クリックすると、HTML ページのトップに戻ることができます。この記事では、最も単純な HTML ページを先頭に返す jQuery コードを紹介します。興味のある方は参照してください。

ページを先頭に戻す効果を実現するには、function()、animate、fadeOut など、多くの JavaScript の知識が必要です。不明な場合は、次の関連記事を参照してください。 PHP 中国語 Web サイト、または JavaScript ビデオ チュートリアル にアクセスしてください。

インスタンスの説明: ユーザーがページを下にスライドすると、スクロール バーと上部の間の距離が 100 ピクセルを超える場合、ボタンがクリックされて上部に戻るときに、fadeIn が使用されます。具体的なコードは次のとおりです。

HTML 部分:

<div id="wrapper">
     <div class="cont1"></div>
     <div class="cont2"></div>
     <div class="cont3"></div>
     <div class="cont4"></div>
     <a href="javascript:void(0)" id="toTop" style="display: block;"> 
     </a>
</div>

CSS 部分:

*{margin: 0;padding: 0;}
            #wrapper{margin: 0 auto;width: 500px;}
            .cont1{height: 500px;background-color: wheat;}
            .cont2{height: 500px;background-color: honeydew;}
            .cont3{height: 500px;background-color: blueviolet;}
            .cont4{height: 500px;background-color: pink;}
            #toTop {display: none;text-decoration: none;position: fixed;bottom: 20px;right: 20px;overflow: hidden;width: 50px;height: 50px;background: url(img/icon_top.png) no-repeat center center;}

JavaScript 部分:

注: jQuery で記述されているため、必ず jQuery ファイルをインポートしてください

$(function(){
         //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
         $(function () {
             $(window).scroll(function(){
                 if ($(window).scrollTop()>100){
                     $("#toTop").fadeIn(1000);
                 }
                 else
                 {
                     $("#toTop").fadeOut(1000);
                 }
             });
             //当点击跳转链接后，回到页面顶部位置
             $("#toTop").click(function(){
                 $('body,html').animate({scrollTop:0},1000);
                 return false;
             });
         });
    });

レンダリング:

上記では、その方法を説明しました。 jQuery を使用して HTML ページの先頭に戻るコードを実装します。手順は非常に詳細で簡単です。初心者でも自分のコードで先頭に戻る効果が得られるかどうかを確認してください。役に立つでしょう！

【おすすめ関連チュートリアル】

1. jQuery 中国語リファレンス マニュアル
2. jQuery ビデオ チュートリアル ##3. #bootstrap チュートリアル
トップに戻るエフェクト コードをダウンロードしたい場合は、

トップに戻るコード

列にアクセスしてください。

以上がjQueryを使ってページを先頭に戻す方法（コード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。