[初学者向け] jQueryでTOPへ戻るボタンを実装する方法

スクロールをしたら右下にトップへ戻るボタンをjQueryで実装する方法です。
初学者の方向けになるべく丁寧にご紹介していきます。

#はじめに
今回はシンプルに「TOP」という文字を押すと、TOPへ戻るようにします。（四角い背景つき）
デザインによっては好きなフォントを使用することもできますが、jQueryの実装は変わらないので、ご紹介する方法を適用できます。
完成形はこちらです。

See the Pen oNLreLe by yuzuyuzu0830 (@yuzuyuzu0830) on CodePen.

では早速、HTML/CSSから書いていきたいと思います。 #HTML/CSSのコード まずはHTMLから書いていきます。

index.html

<div class="header">
  <p>完成イメージ</p>
  <p>スクロールすると、右下にボタンが出てきます</p>
</div>

<!-- ここからがボタンのコード -->
<div id="p-scroll"><a href="#">TOP</a></div>

今回はスクロールをさせたかったので、 headerクラスを書いています。
コードはどこに書いても大丈夫です。
わかりやすいように、コードの上の方か下の方に書いておくのがいいかと思います。


続いてはCSです。

style.css

.header {
  height: 500px;
}

/* ここからがボタンの実装 */
#p-scroll {
  position: fixed;
  bottom: 50px;
  right: 50px;
}
#p-scroll a {
  text-align: center;
  text-decoration: none;
  background: #99FFFF;
  color: #fff;
  padding: 30px;
}
#p-scroll a:hover {
  background: #33FFFF;
}

bottomとrightでボタンの位置を指定し、position: fixed;で固定しています。
hover時（カーソルをボタンに乗せた時）には色が変わるように設定していますが、不要であればこちらの記述は必要ないです。
それぞれの数値に関しても、サイトのレイアウトによって変更が可能です。
#jQueryのコード
では最後に、jQueryを書いていきます。

js

$(function(){
  var pagescroll = $('#p-scroll');
  // 初めはボタンを非表示にする
  pagescroll.hide();

  // 50px スクロールをすると、ボタンが表示される
  $(window).scroll(function () {
     if ($(this).scrollTop() > 50) {
          pagescroll.fadeIn();
     } else {
  // 50px以上スクロールされていない時は、ボタンを表示しない
          pagescroll.fadeOut();
     }
  });
  // ボタンを押すと、0.8秒かけてトップに戻る
  pagescroll.click(function () {
     $('body, html').animate({ scrollTop: 0 }, 800);
     return false;
  });
});

解説していきます。

$(window).scroll(function () {
     if ($(this).scrollTop() > 50) {
        pagescroll.fadeIn();
 }

今回はif文を使った条件分岐の方法で書いていきます。
if文とは簡単にいうと、もし(if)〜だったら、ーをする、そうでなければ(else)、ーをする。という構文です。
つまり、それぞれifとelseの後にある{}の中に書かれているのが、ーの部分になります。

次に、scrollTop()は画面をスクロールした時の位置を取得できるメソッドです。
pagescrollには#p-scrollを代入しているので、今回の場合は50pxスクロールをすると、非表示にしていたボタンが出現する設定になっています。
fadeIn()はそのままですが、HTML要素を表示させることができるメソッドです。

else {
  pagescroll.fadeOut();
}

elseの後にある{}には、先ほど説明した通り、ifの条件に当てはまらなかった時のメソッドが書いてあります。
今回はfadeOut()メソッドになっており、fadeIn()とは対比に、HTML要素を非表示にさせることができるメソッドです。

$('body, html').animate({ scrollTop: 0 }, 800);

続いて、animate()を使用し、ボタンを押したときにトップに戻る実装を行なっていきます。
まず、animate()メソッドは以下のように書くことができます。

$function() {
 ('動かす要素').animate({動かすアニメーション名:距離/位置}, 動かす時間);

scrollTop()は先ほども使用した、画面をスクロールした時の位置を取得できるメソッドでした。この場合は位置に0が指定されているので、topから0の位置、つまりページトップを指しています。
そして時間は800、つまり0.8秒に指定しています。そのため、数字が小さくなればなるほど、動くスピードは早くなります。

また、今回はhtmlとbodyを両方とも指定しています。本来ならばどちらか1つでいいはずですが、2つ指定しているのには、ブラウザによって対応している要素が異なるからです。
ChromeやSafariといったwebkitが対応しているブラウザはbody、Internet Explorerといったwebkitが対応していないブラウザはhtmlを指定する必要があります。

そして最後のこちらの1行

return false;

初めは、なんのための1行？と思ったのですが、こちらはHTML要素のaタグを無効にする役割があります。
通常aタグは、クリックすると指定されたリンクへ飛ぶ要素になりますが、今回の場合はクリックをすると一番初めに戻る設定をしているため、aタグの動きをキャンセルする必要があるんですね。
#最後に
今回はjQueryを使用して、ボタンをクリックすると一番初めに戻る実装をご紹介しました。
また、今回は画面の幅の関係でスクロールは50pxにしていますが、パソコンに合わせる場合は100px等でもいいのではないかと思います。その他にもボタンのデザインや戻る秒数など、ご自身のデザインに合わせて変更してみてください。