【サンプルあり】jQueryでページのトップへ戻るボタンの作り方

どうも、ジャングルオーシャンのミケです。

今日はjQueryで作るページのトップへ戻るボタンのご紹介だよ！

ページのトップへ戻るボタンとは

ページのトップへ戻るボタンは

例えば、スクロールする量が多いページなどで

一番上に戻りたい時に

パソコンだとマウスホイールをｶﾘｶﾘｶﾘｶﾘｶﾘｶﾘｶﾘｶﾘｶﾘｶﾘってやるのは大変だし

スマホだと指をｽｯｽｯｽｯｽｯｽｯｽｯｽｯｽｯｽｯｽｯｽｯｽｯって動かすのも大変だよね

そこで、クリック一つでページの一番上に戻るボタンがあると便利！

ということでできたボタンがページのトップに戻るボタンなんだ

だいたいページの右下に固定されて表示されている事が多いね。

イメージはサンプルデモページを見てみてね。

サンプルデモページはこちら

jQueryを導入する

まずはjQueryを導入するよ！

ファイルをダウンロードして導入する

jQueryの公式サイトからファイルをダウンロードしてね。

jQueryの公式サイトはこちら

ダウンロードができたらファイルを読み込ませるコードを書こう！

<script src="js/jquery-3.5.1.min.js"></script>

1	<script src="js/jquery-3.5.1.min.js"></script>

CDNを使って導入する

CDNを使って導入することもできるよ。

CDNの場合はファイルをダウンロードせずに

以下のコードを書くだけで大丈夫だよ！

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

シンプルなページのトップへ戻るボタン

まず最初はシンプルなページのトップへ戻るボタンを実装してみよう！

記述は以下のようになるよ。

HTML

<div class="content">
    <div id="topBtn">TOP</div>
</div>

</div>

CSS

#topBtn{
    background: #3b3b3b;
    color: #fff;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#topBtn{

background: #3b3b3b;

color: #fff;

position: fixed;

right: 20px;

bottom: 20px;

border-radius: 50%;

width: 55px;

height: 55px;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

}

jQuery

//id属性がtopBtnの要素をクリックすると
$('#topBtn').click(function(){

    //画面の上から0pxの所まで500ミリ秒（0.5秒）かけてアニメーションしながらスクロールする
    $('html, body').animate({scrollTop: 0}, 500);

});

//id属性がtopBtnの要素をクリックすると

$('#topBtn').click(function(){

//画面の上から0pxの所まで500ミリ秒（0.5秒）かけてアニメーションしながらスクロールする

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

});

サンプルデモページはこちら

contentクラスのついたdiv要素の中に入っているtopBtnというid属性がついたdiv要素をトップに戻るためのボタンにしているよ。CSSでボタンを丸くして「TOP」という文字が中心にくるようにしているよ。また、このボタンはposition:fixed;とright:20px;とbottom:20px;で画面の右下に固定されるようにしているよ。トップへ戻る挙動はjQueryで記述していて、animate()メソッドを使っているんだ。

途中から表示されるページのトップへ戻るボタン

次はスクロールしていると途中から表示されるページのトップへ戻るボタンを

実装してみよう！

記述は以下の通りだよ。

HTML

<div class="content">
    <div id="topBtn">TOP</div>
</div>

</div>

CSS

#topBtn{
    background: #3b3b3b;
    color: #fff;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#topBtn{

background: #3b3b3b;

color: #fff;

position: fixed;

right: 20px;

bottom: 20px;

border-radius: 50%;

width: 55px;

height: 55px;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

}

jQuery

$(function() {

    //ボタンを非表示にする
    $('#topBtn').hide();

    //画面をスクロールしたとき
    $(window).scroll(function() {

        //1000pxより多くスクロールした場合
        if($(this).scrollTop() > 1000) {

            //ボタンをフェードインさせる
            $('#topBtn').fadeIn();

        //それ以外の場合
        } else {

            //ボタンをフェードアウトさせる
            $('#topBtn').fadeOut();
        }
    });

    //id属性がtopBtnの要素をクリックすると
    $('#topBtn').click(function(){

    //画面の上から0pxの所まで500ミリ秒（0.5秒）かけてアニメーションしながらスクロールする
    $('html, body').animate({scrollTop: 0}, 500);

    });

});

$(function() {

//ボタンを非表示にする

$('#topBtn').hide();

//画面をスクロールしたとき

$(window).scroll(function() {

//1000pxより多くスクロールした場合

if($(this).scrollTop() > 1000) {

//ボタンをフェードインさせる

$('#topBtn').fadeIn();

//それ以外の場合

} else {

//ボタンをフェードアウトさせる

$('#topBtn').fadeOut();

}

});

//id属性がtopBtnの要素をクリックすると

$('#topBtn').click(function(){

//画面の上から0pxの所まで500ミリ秒（0.5秒）かけてアニメーションしながらスクロールする

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

});

サンプルデモページはこちら

1つ目のサンプルとほとんど同じで、違う所はjQueryで追加した箇所だけだね。最初はボタンをhide()で非表示にして、1000px以上スクロールした時に表示してそれ以外は非表示にするようにif文で書いてあるよ。「1000」と書いてあるのは1000pxのことだからここを「500」にしたら500pxを境にして表示、非表示を切り替えることができるよ。

ある要素を過ぎると表示されるページのトップへ戻るボタン

HTML

<div class="content">
    <p>まだ表示されません。</p>
    <p class="showBtn">ここから表示されます。</p>
    <p>表示されています。</p>
    <div id="topBtn">TOP</div>
</div>

<p>まだ表示されません。</p>

<p class="showBtn">ここから表示されます。</p>

<p>表示されています。</p>

</div>

CSS

#topBtn{
    background: #3b3b3b;
    color: #fff;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#topBtn{

background: #3b3b3b;

color: #fff;

position: fixed;

right: 20px;

bottom: 20px;

border-radius: 50%;

width: 55px;

height: 55px;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

}

jQuery

$(function() {

    //showBtnクラスのついた要素の位置情報を取得して変数showに入れる
    const show = $(".showBtn").offset();

    //ボタンを非表示にする
    $('#topBtn').hide();

    //画面をスクロールしたとき
    $(window).scroll(function() {


        //スクロールした量より変数showのトップからの高さの方が小さい場合
        if($(this).scrollTop() > show.top) {

            //ボタンをフェードインさせる
            $('#topBtn').fadeIn();

        //それ以外の場合
        } else {

            //ボタンをフェードアウトさせる
            $('#topBtn').fadeOut();
        }
    });

    //id属性がtopBtnの要素をクリックすると
    $('#topBtn').click(function(){

    //画面の上から0pxの所まで500ミリ秒（0.5秒）かけてアニメーションしながらスクロールする
    $('html, body').animate({scrollTop: 0}, 500);

    });

});

$(function() {

//showBtnクラスのついた要素の位置情報を取得して変数showに入れる

const show = $(".showBtn").offset();

//ボタンを非表示にする

$('#topBtn').hide();

//画面をスクロールしたとき

$(window).scroll(function() {

//スクロールした量より変数showのトップからの高さの方が小さい場合

if($(this).scrollTop() > show.top) {

//ボタンをフェードインさせる

$('#topBtn').fadeIn();

//それ以外の場合

} else {

//ボタンをフェードアウトさせる

$('#topBtn').fadeOut();

}

});

//id属性がtopBtnの要素をクリックすると

$('#topBtn').click(function(){

//画面の上から0pxの所まで500ミリ秒（0.5秒）かけてアニメーションしながらスクロールする

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

});

サンプルデモページはこちら

HTMLにshowBtnクラスのついた要素を追加したよ。この要素を過ぎた時にページのトップへ戻るボタンが表示されるようになっているよ。jQueryもさっきのサンプルと少し変わっていて、showBtnクラスのついた要素の位置情報をoffset()メソッドで取得して変数showに入れていて、そのshowのtopからの位置情報をさっきのサンプルで「1000」となっていた箇所に入れているからshowBtnクラスのついた要素を過ぎた時に表示されるようになっているよ。

ページのトップへ戻るボタンを記号で表示したい！

今までのサンプルで作ったボタンは

ボタンに「TOP」と文字が表示されていたけど

これを文字じゃなくて記号を表示したいという場合もあるよね。

今回は、Font Awesomeを使ってボタンを記号で表示する方法を紹介するね！

ちなみにFont Awesomeは「フォントオーサム」って読むよ！

まずはheadタグ内にこのコードを記述しよう！

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

1	<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

これでFont Awesomeを使う準備はできたよ！

次にFont Awesomeのページに行って使いたい記号を選ぼう。

Font Awesomeのアイコン一覧ページはこちら

このページにはFont Awesomeで使えるアイコンがずらっと並んでいるんだ。

ちなみに薄いグレーになっているアイコンは有料会員にならないと使えないよ。

このページにある検索ボックスで使いたいアイコンを検索しよう！

今回は、「arrow」と検索して出てきた「arrow-up」というアイコンを使うよ。

使いたいアイコンをクリックすると、アイコンのページに飛ぶから

そこで下の方にある「Start Using This Icon」をクリックしよう。

そうするとモーダルウィンドウが出るからそこに書いてある

HTMLのコードをコピーしよう。

これをさっきまで「TOP」という文字を入れていた所にコピペしよう。

これで記号を使う準備はできたね。

それじゃ、それぞれのコードをみていこう！

HTML

<div class="content">
    <p>まだ表示されません。</p>
    <p class="showBtn">ここから表示されます。</p>
    <p>表示されています。</p>
    <div id="topBtn"><i class="fas fa-arrow-up"></i></div>
</div>

<p>まだ表示されません。</p>

<p class="showBtn">ここから表示されます。</p>

<p>表示されています。</p>

</div>

CSS

#topBtn{
    background: #3b3b3b;
    color: #fff;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#topBtn{

background: #3b3b3b;

color: #fff;

position: fixed;

right: 20px;

bottom: 20px;

border-radius: 50%;

width: 55px;

height: 55px;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

}

jQuery

$(function() {

    //showBtnクラスのついた要素の位置情報を取得して変数showに入れる
    const show = $(".showBtn").offset();

    //ボタンを非表示にする
    $('#topBtn').hide();

    //画面をスクロールしたとき
    $(window).scroll(function() {


        //スクロールした量より変数showのトップからの高さの方が小さい場合
        if($(this).scrollTop() > show.top) {

            //ボタンをフェードインさせる
            $('#topBtn').fadeIn();

        //それ以外の場合
        } else {

            //ボタンをフェードアウトさせる
            $('#topBtn').fadeOut();
        }
    });

    //id属性がtopBtnの要素をクリックすると
    $('#topBtn').click(function(){

    //画面の上から0pxの所まで500ミリ秒（0.5秒）かけてアニメーションしながらスクロールする
    $('html, body').animate({scrollTop: 0}, 500);

    });

});

$(function() {

//showBtnクラスのついた要素の位置情報を取得して変数showに入れる

const show = $(".showBtn").offset();

//ボタンを非表示にする

$('#topBtn').hide();

//画面をスクロールしたとき

$(window).scroll(function() {

//スクロールした量より変数showのトップからの高さの方が小さい場合

if($(this).scrollTop() > show.top) {

//ボタンをフェードインさせる

$('#topBtn').fadeIn();

//それ以外の場合

} else {

//ボタンをフェードアウトさせる

$('#topBtn').fadeOut();

}

});

//id属性がtopBtnの要素をクリックすると

$('#topBtn').click(function(){

//画面の上から0pxの所まで500ミリ秒（0.5秒）かけてアニメーションしながらスクロールする

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

});

サンプルデモページはこちら

HTMLの「TOP」と書いていた箇所をFont Awesomeに変えただけで、さっきのサンプルとの違いはないね。これだけですぐ使えるFont Awesomeってすごく便利だよね！

ページのトップへ戻るボタンを画像で表示したい！

次は「TOP」と文字で書いていたボタンを画像で表示してみよう。

HTML

<div class="content">
    <p>まだ表示されません。</p>
    <p class="showBtn">ここから表示されます。</p>
    <p>表示されています。</p>
    <div id="topBtn"><img src="images/r-hand.png" alt=""></div>
</div>

<p>まだ表示されません。</p>

<p class="showBtn">ここから表示されます。</p>

<p>表示されています。</p>

</div>

CSS

#topBtn{
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
}


#topBtn img{
    width: 200px;
    transform: rotateZ( 90deg );
}

#topBtn{

position: fixed;

right: 20px;

bottom: 20px;

cursor: pointer;

}

#topBtn img{

width: 200px;

transform: rotateZ( 90deg );

}

jQuery

$(function() {

    //showBtnクラスのついた要素の位置情報を取得して変数showに入れる
    const show = $(".showBtn").offset();

    //ボタンを非表示にする
    $('#topBtn').hide();

    //画面をスクロールしたとき
    $(window).scroll(function() {


        //スクロールした量より変数showのトップからの高さの方が小さい場合
        if($(this).scrollTop() > show.top) {

            //ボタンをフェードインさせる
            $('#topBtn').fadeIn();

        //それ以外の場合
        } else {

            //ボタンをフェードアウトさせる
            $('#topBtn').fadeOut();
        }
    });

    //id属性がtopBtnの要素をクリックすると
    $('#topBtn').click(function(){

    //画面の上から0pxの所まで500ミリ秒（0.5秒）かけてアニメーションしながらスクロールする
    $('html, body').animate({scrollTop: 0}, 500);

    });

});

$(function() {

//showBtnクラスのついた要素の位置情報を取得して変数showに入れる

const show = $(".showBtn").offset();

//ボタンを非表示にする

$('#topBtn').hide();

//画面をスクロールしたとき

$(window).scroll(function() {

//スクロールした量より変数showのトップからの高さの方が小さい場合

if($(this).scrollTop() > show.top) {

//ボタンをフェードインさせる

$('#topBtn').fadeIn();

//それ以外の場合

} else {

//ボタンをフェードアウトさせる

$('#topBtn').fadeOut();

}

});

//id属性がtopBtnの要素をクリックすると

$('#topBtn').click(function(){

//画面の上から0pxの所まで500ミリ秒（0.5秒）かけてアニメーションしながらスクロールする

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

});

サンプルデモページはこちら

HTMLのボタンの箇所に書いてあった「TOP」の代わりにimgタグで画像を入れて、CSSでwidthを指定する事で画像のサイズを調整したよ。CSSのtransformは画像を回転させるために書いたよ。

レスポンシブでボタンの表示非表示を切り替える

正直、あんまり使うことはないかもしれないけど

ボタンをレスポンシブページで使うときに

表示、非表示を切り替えたいという場合もあるかもしれないよね。

そんなときは以下のような記述をすると

デバイス毎に表示、非表示の切り替えをすることができるよ。

今回、ブレイクポイントは768pxで作っているよ。

HTML

<div class="content">
    <p>まだ表示されません。</p>
    <p class="showBtn">ここから表示されます。</p>
    <p>表示されています。</p>
    <div id="topBtn"><img src="images/r-hand.png" alt=""></div>
</div>

<p>まだ表示されません。</p>

<p class="showBtn">ここから表示されます。</p>

<p>表示されています。</p>

</div>

CSS

#topBtn{
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
}

#topBtn img{
    width: 200px;
    transform: rotateZ( 90deg );
}

@media screen and (max-width: 768px){
#topBtn{
    display: none;
    }
}

#topBtn{

position: fixed;

right: 20px;

bottom: 20px;

cursor: pointer;

}

#topBtn img{

width: 200px;

transform: rotateZ( 90deg );

}

@media screen and (max-width: 768px){

#topBtn{

display: none;

}

jQuery

$(function() {

    //showBtnクラスのついた要素の位置情報を取得して変数showに入れる
    const show = $(".showBtn").offset();

    //ボタンを非表示にする
    $('#topBtn').hide();

    //画面をスクロールしたとき
    $(window).scroll(function() {


        //スクロールした量より変数showのトップからの高さの方が小さい場合かつウィンドウの横幅が768px以上の場合
        if($(this).scrollTop() > show.top &amp;&amp; window.matchMedia( "(min-width: 768px)" ).matches) {

            //ボタンをフェードインさせる
            $('#topBtn').fadeIn();

        //それ以外の場合
        } else {

            //ボタンをフェードアウトさせる
            $('#topBtn').fadeOut();
        }
    });

    //id属性がtopBtnの要素をクリックすると
    $('#topBtn').click(function(){

    //画面の上から0pxの所まで500ミリ秒（0.5秒）かけてアニメーションしながらスクロールする
    $('html, body').animate({scrollTop: 0}, 500);

    });

});

$(function() {

//showBtnクラスのついた要素の位置情報を取得して変数showに入れる

const show = $(".showBtn").offset();

//ボタンを非表示にする

$('#topBtn').hide();

//画面をスクロールしたとき

$(window).scroll(function() {

//スクロールした量より変数showのトップからの高さの方が小さい場合かつウィンドウの横幅が768px以上の場合

if($(this).scrollTop() > show.top && window.matchMedia( "(min-width: 768px)" ).matches) {

//ボタンをフェードインさせる

$('#topBtn').fadeIn();

//それ以外の場合

} else {

//ボタンをフェードアウトさせる

$('#topBtn').fadeOut();

}

});

//id属性がtopBtnの要素をクリックすると

$('#topBtn').click(function(){

//画面の上から0pxの所まで500ミリ秒（0.5秒）かけてアニメーションしながらスクロールする

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

});

サンプルデモページはこちら

ブレイクポイントを768pxに設定していて、768px以下の時にはボタンが非表示になるようにしているよ。CSSでメディアクエリを使って768pxの時には非表示になるように設定していて、jQueryでウィンドウの横が768px以上の時には表示されるようにしているよ。

まとめ

無事に実装できたかな？

1クリックでページの一番上まで戻れるから

結構便利な機能だよね。

ぜひ自分のウェブサイトにも導入してみてね。

それじゃまた今度！

TwitterやFacebookのフォローよろしくね！

Twitter
@michelgorilla

Facebook
ミケランジェロ