【jQuery】ページトップへ戻るボタンを実装する方法

WEBサイトでよく見かけるページトップへ戻るボタン。ユーザーにとっても便利なボタンですね。

このページではページトップへ戻るボタンを実装する方法と、最初はボタンを非表示にし、スクロールが一定数に達すると表示させる方法をご紹介いたします。

目次

1. ページトップへ戻る（スムーススクロール）

完成形デモ

See the Pen ページトップへ戻る（スムーススクロール） by crnote (@crnote) on CodePen.

CSS

ボタンの装飾

cssではボタンの装飾と、ボタンの位置を右下に固定します。

  1. .topbtn {
  2.   /*ボタンの装飾*/
  3.   width: 65px;
  4.   height: 65px;
  5.   line-height: 65px;
  6.   background-color: #928484;
  7.   border-radius: 50%;
  8.   text-align: center;
  9.   /*位置を固定*/
  10.   position: fixed;
  11.   bottom: 20px;
  12.   right: 20px;
  13. }
  14. .topbtn a {
  15.   text-decoration: none;
  16.   color: #fff;
  17. }

jQuery

スムーススクロール

jQueryでスムーススクロールを実装します。

「#」で始まるリンクをクリックした時に実行されます。

animateの数字はスクロールの速度（ミリ秒）を指定します。

  1. $(function(){
  2.   //#で始まるリンクをクリックしたときに実行
  3.   $("a[href*='#']:not([href='#'])").click(function(){
  4.     //移動先を取得
  5.         var target=$($(this).attr("href")).offset().top;
  6.         target-=0
  7.     //数値はスクロールの速度（ミリ秒）
  8.         $("html,body").animate({scrollTop:target},500);
  9.         return false;
  10.         });
  11. });

2. スクロールが一定数に達するとページトップへ戻るボタンを表示

完成形デモ

See the Pen スクロールするとページトップへ戻るボタンを表示 by crnote (@crnote) on CodePen.

CSS

ボタンの装飾

cssでは上記と同じくボタンの装飾と、ボタンの位置を右下に固定します。

jQuery

スクロールが一定数に達したらボタンを表示

jQueryでは上記と同じスムーススクロールの記述に、スクロールが一定数に達したらボタンを表示させる記述を追加します。

「topBtn.hide」で最初はボタンを非表示にしておきます。

scrollTopの数値には、トップからスクロールした箇所までのpx数を指定し、その数値までスクロールが達したらボタンが表示されます。

今回の例の場合は、トップから250pxスクロールしたら、ボタンが表示される設定になっています。

  1. //.topbtnを非表示
  2.   var topBtn = $('.topbtn');
  3.     topBtn.hide();
  4.     //スクロールが250に達したらボタンをフェードイン
  5.     $(window).scroll(function () {
  6.         if ($(this).scrollTop() > 250) {
  7.             topBtn.fadeIn();
  8.         } else {
  9.             topBtn.fadeOut();
  10.         }
  11.     });

まとめ

今回ご紹介したjQueryはページトップに戻るボタン以外にも、固定のお問い合わせボタンなどにも使用できるので、使い方をマスターしておくと便利です！

PAGE TOP