jQueryを使ってページを先頭に戻す方法（コード添付）-jsチュートリアル-php.cn

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

yulia

リリース： 2020-06-02 09:49:24

オリジナル

4315 人が閲覧しました

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(){
                 $(&#39;body,html&#39;).animate({scrollTop:0},1000);
                 return false;
             });
         });
    });

ログイン後にコピー

レンダリング:

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