【コピペで使える】JQueryのトップへ戻るボタン実装サンプル

tasan

ウェブサイトを見ているとよく右下の方に「トップへ戻る」や上矢印のようなボタンがあって、クリックするとページの一番上まで自動でスクロール（アニメーション）しながら戻るといった機能を見るかと思います。

今回はこの「トップへ戻る」ボタンの実装サンプルを備忘録として残したいと思います。

トップへ戻るボタンの必要性

基本的に「トップへ戻る」ボタンは縦長のページで利便性を発揮します。

縦長のページを一通り読んでサイト内の他のページを見たいと思ったとき、上部にあるナビゲーションメニューまでまたスクロールして戻るのは面倒です。

それが面倒なあまりに、もしかするとそのままサイトを離脱してしまうかもしれません。だとすれば大きな機会損失ですよね？

ですから、「トップへ戻る」ボタンというのは思いのほか大事な役割を担う機能なのです。

（トップへ戻るボタンを設置する代わりに、ナビゲーションメニューを上部固定にするといった方法もあります。）

アニメーション効果はつけた方がいい？

「トップへ戻る」ボタンをクリックした際の動作として、自動スクロール（アニメーション）は使用した方がよいです。

自動スクロール（アニメーション）を使用することで、ユーザーは同じページ内を移動していることを認識することができるからです。

クリック時にいきなり画面が切り替わってしまう場合、ユーザーは別のページに移動してしまったと思うかもしれません。

ウェブサイトのアニメーション効果には不要なものも多くありますが、「トップへ戻る」ボタンでのアニメーション効果はユーザービリティを考えた場合に意味のある効果であると考えられます。

実装を希望するクライアントは多い

この機能は利便性が高く、実装を希望するクライアントも多いため、基本的には必須の機能として考えておいた方がよいと思います。

（ワードプレスの場合はプラグインがあるのでインストールすれば簡単に利用できます。）

実装サンプル

前置きが長くなりましたが、以下実装サンプルをご紹介します。アレンジがしやすいようにできるだけシンプルな仕様とさせて頂きます。

HTML

<div id="t-scroll"><a href="#">TOP</a></div>

HTMLは非常に簡単ですね。挿入する位置はフッター下あたりでよいかと思います。ボタンに画像を使いたい場合はテキスト部分をimgタグに差し替えればOKです。

CSS

#t-scroll {
    position:fixed;
    bottom:30px;
    right:20px;
}
#t-scroll a {
    background-color:#999;
    color:#fff;
    text-align:center;
    text-decoration:none;
    padding:20px 20px;
}
#t-scroll a:hover {
    background-color:#666;
    text-decoration:none;
}

CSSもシンプルです。背景色や形を変えたい場合はそれぞれでアレンジしてみてください。もしボタンに画像を使用する場合はaタグの指定は必要ありません。

JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
  var tscroll = $('#t-scroll');
  tscroll.hide();
  $(window).scroll(function () {
     if ($(this).scrollTop() > 100) {
          tscroll.fadeIn();
     } else {
          tscroll.fadeOut();
     }
  });
  tscroll.click(function () {
     $('body, html').animate({ scrollTop: 0 }, 500);
     return false;
  });
});
</script>

JQuery部はちょっと難しいですがとりあえずこのままコピペしてもらえばよいかと思います。

やっていることは単純で、

①t-scroll要素を非表示にする
②100pxより下ならt-scroll要素をフェードインで表示する、100pxより上ならt-scroll要素をフェードアウトで隠す。
③t-scroll要素がクリックされたらページトップまでスクロールして移動する

という内容です。

動作としてはこれ以上でも以下でもないと思いますので、JQuery部はアレンジの余地はあまりないのではないかと思います。

まとめ

「トップへ戻る」ボタンの実装も紹介するサイトによって差異がありますが、アレンジを考慮するとできるだけミニマムなサンプルが使いやすいと思います。

一度これを使うと決めてしまえば毎回実装の度に迷う必要もないと思いますので、こちらのサンプルをベースに実装してもらえると嬉しいです。

Follow me!

投稿者プロフィール

tasan