見ているページの一番上へ戻るボタンを
jQueryを使って設置する方法や調整・設定について

今では多くのサイトに実装されている機能の1つかとも思われますが、多くのページなどで右下に「↑」や「∧」のようなボタンが表示され、クリックすると今見ているページの一番上に戻るというリンクが設置されています。

今回はこのページトップに戻る系のリンクをjQueryを使った設定について紹介していきます。ボタンの設置、それらをjQueryを使っての設定と、スクロールしたら表示されページ上段に行くと消えるといったやり方などの調整部分も合わせて紹介していきます。

ページトップへ戻るボタンの設置と設定

ではまず実際のコードについて見ていきましょう。

HTMLのコード

HTMLは書き方次第でなんとでも出来てしまうところがあるので、あくまでも一例にはなります。
buttonタグを使って設置するという方もいれば、pタグを使って設置するという方もいますので、そのあたりはサイトや自分のやり方に合わせて設置していきましょう。

今回はbuttonタグで解説してみたいと思います。

<button id="topbtn"></button>

必要なのはこれだけです。
また、jQueryを使って設定するため、jQueryの読み込みだけは事前に済ませておきましょう。方法は下記のページでも説明しています。

CSSのコード

主にCSSはボタンの装飾になります。
こちらもやり方は様々ですが、今回はシンプルに「∧」をCSSだけで設定する方法についてまとめておきます。

#topbtn{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 30px;
  bottom: 30px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  outline: 0;
  background-color: #666;
  cursor: pointer;
  z-index: 999;
}

#topbtn::before {
  content: "";
  width: 10px;
  height: 10px;
  margin: 0px 0px -4px;
  border-top: 3px #fff solid;
  border-right:  3px #fff solid;
  transform: rotate(-45deg);
}

#topbtn:hover {
  background-color: #000;
}

特に難しい設定という事はないのですが、#topbtnでボタンを表示する位置と大枠の調整、::beforeの疑似要素を使って∧の設定をしています。

今回は通常時はグレーの丸の上に白の∧が表示され、マウスオーバーで黒背景に白の∧が表示されるように設定しています。

jQueryのコード

そしてこれらのボタンをクリックしたらページのトップにスムーススクロールをして戻るというjQueryの設定コードになります。

まずはクリックしたらシンプルにページの上にスムーススクロールをするというだけの設定です。

$('#topbtn').on('click', function () {
  $('html, body').animate({ scrollTop: 0 }, 700);
});

注意点は、ID名の統一と、最後の700のところのスピードの調整くらいです。
最後のスピードはミリ秒での設定になりますが、300～700くらいまでが妥当なスピードではないかなと思われます。

これらを設定したデモページを下記に用意してみました。

デモページ

これだけで、ページトップへ戻るボタンの設置と設定は完了といきたいところですが、実際に多くのサイトで導入されているのは、ある程度スクロールしたらボタンが出てきて、ページの上の方に戻ればボタンが消える設定かと思います。

実際にこの裏方ワークスのブログでもそういう設定でページトップへ戻るボタンの設置と設定を行っていますので、そのやり方についても見ておきましょう。

スクロールしたら表示・非表示されるボタン

HTMLとCSSの設定は変わらず、変更するのはjQueryの設定分になります。

$(function() {
  const topbtn = $('#topbtn');
  topbtn.hide();
  $(window).scroll(function (){
    if ($(this).scrollTop() > 700) {
      topbtn.fadeIn();
    } else {
      topbtn.fadeOut();
    }
  });
  topbtn.click(function () {
    $('html, body').animate({ scrollTop: 0 }, 700);
    return false;
  });
});

このように設定を書き換えることで、一定px分スクロールするとボタンが表示され、クリックするとページのトップにスムーススクロールで滑らかに移動してくれるようになります。

設定箇所としては、5行目の「700」としているところが、どこまでスクロールすればボタンを表示するかの設定になります。上記では700としているので700px分スクロールしたらボタンが表示されるようになっています。同じように700pxより上に行けばボタンを非表示にするという設定も入っています。

この設定で、700pxを超えればボタンを表示、700pxより上に戻ればボタンを非表示となりますので、サイトに合わせて数字を変更しておきましょう。ただ、あまりに小さい数字を設定するとスクロールしなくても表示することになってしまいがちなので、300～1000くらいが妥当かなと思います。

また、12行目の最後も700と設定をしていますが、こちらは最初に記載しているコードと中身は同じで、ボタンをクリックした際の上に戻るスムーススクロールの速度設定になります。

ミリ秒での設定になり700と設定しているので0.7秒でページのトップに戻るという設定になりますので、好きな数字を設定するようにしましょう。

こちらの設定をしたデモページもご用意しましたので、一定スクロールしたら表示され、上に戻れば消えるというのをご確認いただけます。

デモページ

まとめ

よく使われる機能の1つでもあるページのトップへ戻るのボタン設置や設定についてまとめてみました。

あまり実務でこのボタンを押したりして役立つかどうかなどは別としても、多くのサイトで導入されているものでもあり、サイトなどによっては遊び心なども付け加えられたりするところでもあったりします。

jQueryを使う事で簡単にさっと導入することができますし、使う際にはほぼコピペでそのまま使える形になっていますので、自分用のコードスニペットなどに登録して活用していくようにすると良いのではないかなと思います。