【jQuery】ページトップに戻るボタンを実装する【easing対応】

こんにちは、Ryohei（@ityryohei）です！

本記事では、Webサイトでよく設置されているページトップに戻るのボタンの作成方法をご紹介しています。

ボタンを設置してクリックするとページのトップに滑らかに戻るようにしたいんだけど、どうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

jQuery本体を読み込む

本記事ではjQueryを使用するため、CDNでjQuery本体のファイルを読み込みます。CDNはContents Delivery Networkの頭文字を取ったもので、ネットワーク経由でリソースが利用できるサービスです。ネットワークに接続されている機器であればどこからでも利用可能です。

jQueryの本体ファイルは下記の記述で読み込むことができます。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

これでjQueryを使用する準備は完了です。

ページトップに戻るボタンを設置する

HTMLでページの上部へ戻るボタンを設置します。ここではaタグを使用してボタンを作成していますが、p, div, spanタグ等、好きな要素に差し替えることも可能です。他のタグを使用する場合は、href属性を削除してお使いください。

HTML

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1>Main Contents</h1>
    <a id="pagetop" href="#">TOP</a>
</body>
</html>

CSS

#pagetop {
    position: fixed;
    bottom: 20px;
    right: 0;
    padding: 20px;
    color: #fff;
    background: #00c2bc;
    text-decoration: none;
}

下記は動作確認用のデモです。埋め込みページを少しスクロールして右下の緑色のボタンをクリックするとページトップに戻る動作をします。操作して使用感をご確認ください。

See the Pen by ryohei (@intotheprogram) on CodePen.

上記ではHTMLとCSSで記述しただけなので、ボタンをクリックすると瞬間的にスクロール位置がページトップに戻る動作になっています。こちらにjQueryのスクリプトを追加して、ボタンをクリックした後にスムーズスクロールのアニメーションを追加していきます。

jQueryでスクロールアニメーションを実装する

まずはスタンダードな方法でスクロールアニメーションを実装してみます。TOPと表示された緑色のボタンをクリックすると、一定のスピードでページトップに戻ります。

jQuery

$('#pagetop').on('click', ()=>{
    $('body,html').animate({ scrollTop: 0 }, 1000);
    return false;   
});

下記は前項のHTMLにjQueryのアニメーションを実行した際のデモです。埋め込みページをスクロールして右下の緑色のボタンをクリックして動作をご確認ください。

See the Pen by ryohei (@intotheprogram) on CodePen.

少し補足します。

上記スクリプト2行目のanimateの第一引数に指定しているオブジェクトのscrollTop: 0にはスクロールが停止する位置を指定しています。第二引数の1000ではアニメーションの実行時間をミリ秒単位で指定しています。デモではscrollTopを0、スクロールスピードに1000を指定しているため、緑色のボタンをクリックすると、1秒かけてページの一番上までスクロールする、といった処理内容になっています。

上記のままでも使用に問題はないですが、よりアニメーションに緩急を付けたい方もいると思います。その場合は、jQueryのeasingというオプションを使って、アニメーションに緩急を持たせることができます。

easingでアニメーションに緩急を持たせる

easingはアニメーションに緩急を持たせることができる値です。ゆっくり動いたり、早く動いたり、現実世界における物体に近い動きを再現することができます。easingの動きについては、下記のページでわかりやすく紹介されていますので、一度ご確認いただければと思います。

参考：イージング関数チートシート

easingには多くの種類がありますが、jQueryで標準に指定することができるeasingは下記の2種類です。

swing
linear

その他のeasingを指定したい場合は、別途ファイルを読み込んで対応する必要があります。その場合はjQueryの本体ファイル同様にCDNが用意されていますので、活用してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>

上記を読み込んだ後、使用したいeasing名をanimateに指定します。easingは以下の箇所に指定します。

$('#pagetop').on('click', ()=>{
    $('body,html').animate({ scrollTop: 0 }, 1000, 'easing');
    return false;   
});

例えばeasingにeaseInElasticを指定するのであれば下記のようにします。

$('#pagetop').on('click', ()=>{
    $('body,html').animate({ scrollTop: 0 }, 1000, 'easeInElastic');
    return false;   
});

easingを指定すると下記のような動作になります。

See the Pen by ryohei (@intotheprogram) on CodePen.

これでページトップに戻るアニメーションに緩急を持たせることができるようになりました。

一定量スクロールしてページトップに戻るボタンを表示する

こちらは本記事の内容から一歩踏み込んだ内容となります。WEBサイトで頻繁に目にする実装方法なので、あわせｔご紹介いたします。

前項までの内容ではスクロール位置がページトップにある場合でもトップに戻るボタンが表示されていましたが、ここではページを一定量スクロールすることで表示されるページトップに戻るボタンを実装してみたいと思います。ファーストビューにボタンが表示されなくなるため、キービジュアルをダイナミックに表現したい場合にお使いください。

実装方法はとても簡単で、jQueryでfadeIn、fadeOutのアニメーションを追加するだけです。

$(function(){
    
    $('#pagetop').hide();
    
    $('#pagetop').on('click', ()=>{
        $('body,html').animate({ scrollTop: 0 }, 1000, 'easeInElastic');
        return false;
    });
    
    $(window).on('scroll', ()=>{
        if( $(window).scrollTop() > 200 ){
            $('#pagetop').fadeIn();
        }else{
            $('#pagetop').fadeOut();
        }
    });
});

下記は上記スクリプトを追加した後のデモです。埋め込みページをしばらく下にスクロールすると、右下部分に緑色のボタンが表示されます。

See the Pen by ryohei (@intotheprogram) on CodePen.

少し動きを追加するだけで、とても良い感じのトップに戻るボタンになりましたね！

最後に

ここまでご紹介したソースの全体をまとめておきます。easingには easeInElasticを指定しています。コピペでお使いいただければ幸いです！

<html>
<head>
    <meta charset="utf-8">
    <style>
    body {
        height: 2000px;
        margin: 0;
        padding: 0;
    }

    #pagetop {
        position: fixed;
        bottom: 20px;
        right: 0;
        padding: 20px;
        color: #fff;
        background: #00c2bc;
        text-decoration: none;
    }
    </style>
</head>
<body>
    <h1>Main Contents</h1>
    <a id="pagetop" href="#">TOP</a>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
    <script>
    $(function(){

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

        $('#pagetop').on('click', ()=>{
            $('body,html').animate({ scrollTop: 0 }, 1000, 'easeInElastic');
            return false;
        });

        $(window).on('scroll', ()=>{
            if( $(window).scrollTop() > 200 ){
                $('#pagetop').fadeIn();
            }else{
                $('#pagetop').fadeOut();
            }
        });
    });
    </script>
</body>
</html>

以上、jQueryでページトップに戻るボタンを実装する方法のご紹介でした！