Programming

【jQuery】ページのトップへ戻るボタンの実装【コピペOK】

jQuery ページトップへ戻る
jQueryを学習している人
jQueryを学習している人
jQueryでページトップへ戻るボタンを実装するには、どうしたら良いんだろう…。

この記事では、上記のような悩みを解決していきます。

 

この記事の想定読者

  • ページトップへ戻るボタンを実装したい人
  • jQuetyの勉強をしている人
  • 出来ればコピペOKで紹介しているサイトを探している人

想定している読者は、上記のとおりです。

 

この記事では、「ページトップへ戻るボタンの実装」について書いていきます。

 

コピペOKで、すぐにページトップへ戻る機能を実装できるようになりますよ∩^ω^∩

 

完成イメージ

ページトップ 完成イメージ

 

【jQuery】ページのトップへ戻るボタンの実装【事前準備】

 

ページトップへ戻るボタンの実装にあたって、実装環境は下記のとおりです。

  • JavaScript : ES6
  • jQuery : 3.4.1
  • ブラウザ : Google Chrome
  • jQuery、font awesome : CDN

 

今回は、ES6とjQuery3.4.1の情報が少ないかなと思い、最新のバージョンで書いてみました。

 

なお、コピペする前に、下記の記述が必要です。

//HTMLのhead部分
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

//HTMLの</body>前
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
//自分で作成したjsファイル
<script src="js/**.js"></script>

 

事前準備は以上です∩^ω^∩

 

【jQuery】ページのトップへ戻るボタンの実装【コピペOK】

 

Webサイトのページトップへ戻る機能を持ったボタンの実装を紹介します。コピペで利用OKです。

 

ページトップへ戻る【HTMLの実装】

 

実装に必要なHTMLは、下記のとおり。

<div id="page-top"><a href="#"><i class="fas fa-chevron-up"></i></a></div>

 

HTMLで記述するのは、これだけでOKです。

font awesomeの部分は、ご自分でテキストにするのもアリですね!

 

ページトップへ戻る【CSSの実装】

 

先ほど書いたHTMLを装飾するには、下のコードをスタイルシートにコピペすればOK。

#page-top{
    position:fixed;
    right:30px;
    bottom:30px;
    font-size: 18px;
}

#page-top a{
    display: block;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(253, 201, 133);
    color: #fff;
}
#page-top i{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateY(-40%) translateX(-50%);
}

#page-top a:hover{
    background-color: rgb(255, 226, 189);
}

 

CSSは、上記の感じで書きました。

 

ボタン自体は、オレンジで作成しているので、これまたご自身の好きな色に変更していただけたらと思います。

アレンジを加えた場合には、hoverの色変更をお忘れなく。

 

ページトップへ戻る【jQueryの実装】

 

そして、大本命のjQueryの実装には、下記をコピペしましょう。

<script>
    $( () => {
        let topBtn = $('#page-top');

        topBtn.hide();
        
        $(window).scroll( () => {
            if ($(this).scrollTop() > 400) {
                topBtn.fadeIn();
            } else {
                topBtn.fadeOut();
            }
        });
        
        topBtn.click( () => {
            $('html,body').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
</script>

jQueryの実装部分は、上記のとおりです。

</body>の上に記述しましょう。

「jQueryの読み込み」と「</body>タグ」の間に記述する感じになります。

 

エディターで確認

ページトップ jQuery

実際にエディターで確認すると、上の画像にような記述方法になります。

 

ちなみに、ページトップに戻る速度については、下記の「800」を変えればOKです。

$('html,body').animate({ scrollTop: 0 }, 800);

 

現在は「800 = 0.8秒」に設定しており、あまり早すぎるとトップに戻ったのか分からなくなるかなと思い、このくらいの速度にしています。

ここら辺もお好みでアレンジしてみてください。

 

なお、ES5の記法で使う場合には、下記をコピペで使えるはずです。

<script>
    $( function() {
        var topBtn = $('#page-top');

        topBtn.hide();
        
        $(window).scroll(function() {
            if ($(this).scrollTop() > 400) {
                topBtn.fadeIn();
            } else {
                topBtn.fadeOut();
            }
        });
        
        topBtn.click( function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
</script>

 

というわけで、ページトップへ戻るコードについては、以上です∩^ω^∩

 

おすすめの記事