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

こんにちは、ryohei(@ityryohei)です!

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

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

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

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

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

クリックまたはタップするとページの上部へ戻るボタンを設置します。

HTML

HTMLを記述します。

以下ではaタグを使用していますが、p, div, span等、好きなタグを使用することができます。他のタグを使用する場合は、href属性を削除します。

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

CSS

記述したHTMLにスタイルを定義します。position: fixedで画面の右下に要素を固定しています。

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

以下デモです。

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

TOPと表示されたボタンをクリックするとページのトップにも戻ります。現状ではHTMLとCSSで記述しただけなので、するすると滑らかに戻っていく動きはありません。なので、jQueryでクリックした後に実行するアニメーション処理を追加します。

jQueryを読み込む

CDNを利用してjQueryを読み込みます。

CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用することができるサービスです。ネットワークに接続されている機器であれば利用可能です。有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryのライブラリは以下の記述で読み込むことができます。

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

上記のscriptタグをjQueryを使用するHTMLドキュメントに設置すれば読み込み完了です。

スクロールにアニメーションを付ける

最初はスタンダードな方法で記述してみます。TOPと表示されたボタンをクリックすると、一定のスピードを保ったまま滑らかにページトップに戻ります。

jQuery

<script>
$(function(){
  var top = $('#pagetop');

  top.click(function(){
    $('body,html').animate({
      scrollTop: 0}, 1000);
      return false;
  });
});
</script>

以下デモです。

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

スクロールする位置はscrollTop: 0, スクロールする速さは1000の部分にミリ秒単位で指定します。

デモではscrollTop0、スクロールの速さに1000を設定しているので1秒かけてページの一番上までスクロールする、といった内容になっています。

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

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

easing(イージング)は、アニメーションに緩急を持たせることができるオプションです。ゆっくり動いたり、早く動いたり、現実世界における物体に近い動きを実現することができます。

※以下のページでeasingの動きを確認することができます。

イージング関数チートシート

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

  • swing
  • linear

なので、その他のeasingを指定したい場合は、別途ファイルを読み込んで対応する必要があります。

jQueryの本体ファイル同様、easingもCDNを利用することができます。

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

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

<script>
$(function(){
  var top = $('#pagetop');
  top.click(function(){
    $('body,html').animate({
      scrollTop: 0}, 1000, 'ここに使用するイージング名を指定');
      return false;
  });
});
</script>

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

<script>
$(function(){
  var top = $('#pagetop');
  top.click(function(){
    $('body,html').animate({
      scrollTop: 0}, 1000, 'easeInElastic');
      return false;
  });
});
</script>

以下デモです。easingの動作がご確認いただけます。

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

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

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

こちらは本題とは関係ないですが、WEBサイトでよく見かける実装方法なので併せてご紹介します。ページを一定量スクロールすると、ページトップに戻るボタンを表示されます。実装方法はとても簡単で、jQueryでfadeIn、fadeOutのアニメーションを付加してあげるだけです。

<script>
$(function(){
  var top = $('#pagetop');
  top.hide();
  $(window).scroll(function(){
    if( $(window).scrollTop() > 200 ){
      top.fadeIn();
    }else{
      top.fadeOut();
    }
  });

  top.click(function(){
    $('body,html').animate({
      scrollTop: 0}, 1000, 'easeInElastic');
      return false;
  });
});
</script>

以下デモです。ページをしばらくスクロールするとページトップに戻るボタンが表示されます。

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(){
      var top = $('#pagetop');
      top.hide();
      $(window).scroll(function(){
        if( $(window).scrollTop() > 200 ){
          top.fadeIn();
        }else{
          top.fadeOut();
        }
      });

      top.click(function(){
        $('body,html').animate({
          scrollTop: 0}, 1000, 'easeInElastic');
          return false;
      });
    });
    </script>
  </body>
</html>

さくっと実装したい場合にご使用いただければ幸いです。

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

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍