初心者でも簡単実装！「トップに戻る」ボタンの作り方を解説します。

JavaScript Web制作

初心者でも簡単実装！「トップへ戻る」ボタンの作り方を解説します。

※本記事は広告が含まれる場合があります。

なやむくん
「トップに戻る」ボタンの作り方がわからない
なやむさん
どのように表示させているか仕組みを知りたい

などの疑問や悩みを解決してまいります。

LPであったり、ページが長いWebサイトなどでは必須な機能です。

この記事では初心者や苦手意識がある方でも簡単に実装できる方法をわかりやすく解説します。

トップに戻るボタンの完成例

トップに戻るボタンの完成例は以下になります。

See the Pen TOPに戻るボタン by koutarou mori (@koutarou-mori) on CodePen.

それでは各言語のコード解説をしていきます。

HTML解説

コードは以下のようになっています。

<body>
  <p class="content">
    コンテンツの始まり<br>
    ↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>
    ↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>
    ↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>
    ↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>
    ↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>
    ↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>
    ↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>
    ↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>
    ↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>
    コンテンツの終わり
  </p><!-- /.content -->
  <button id="pageTopBtn"></button><!-- /#pageTopBtn -->
</body>

コンテンツの最上部から最下部に戻る状態をわかりやすくするためにダミーでコンテンツの内容を入れているので、実質TOPに戻るボタンのコードは以下になります。

<body>
  <button id="pageTopBtn"></button><!-- /#pageTopBtn -->
</body>

ボタンとなるbutton要素を用意しています。

ボタンの中の矢印は疑似要素で追加していますので、buttonの中身は不要です。

今回はbutton要素に対してpageTopBtnのIDを追加しています。

pageTopBtnIDをクリックされたらページ最上部に戻る動きをjsで指定していきます。

みつた
HTMLではこれといったポイントはありません。jsで○○をクリックしたら…の形を作れるようにボタンの要素にIDかクラスを指定しましょう。

CSS解説

コードは以下のようになっています。

/* ボタンのデザイン */
#pageTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border: 2px solid #222;
    border-radius: 50px;
    cursor: pointer;
    transition: all .5s;
}
/* ボタンホバー時 */
#pageTopBtn:hover {
    background-color: #222;
}
#pageTopBtn:hover::before {
    background-color: #fff;
}
#pageTopBtn:hover::after {
    background-color: #fff;
}
/* ボタンの矢印 */
#pageTopBtn::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 29px;
    width: 2px;
    height: 20px;
    background-color: #222;
    transition: all .5s;
    transform: translateY(-50%) rotate(-45deg);
}
#pageTopBtn::after {
    position: absolute;
    content: '';
    top: 50%;
    right: 29px;
    width: 2px;
    height: 20px;
    background-color: #222;
    transition: all .5s;
    transform: translateY(-50%) rotate(45deg);
}

CSSではページをスクロールしてもどこからでもページ最上部に戻れるようにボタンを追従させるため、positionプロパティにfixedを指定しています。

またボタン内の矢印は疑似要素で作成しています。

線をtransformプロパティのrotateを指定して、斜めに向かい合うようにして上向きの矢印を作成しています。

JS解説

コードは以下のようになっています。

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

$('#pageTopBtn').on('click', function () {は、pageTopBtnIDをクリックされたら~の部分になります。

クリックしたときの動きのコードですが、まずanimate()の中身の{ scrollTop: 0 }は、指定した要素（今回はhtml要素とbody要素を指定）から0pxの位置に移動するという意味があります。

なのでanimate()がない状態でもページ最上部に移動することはできるのですが、瞬間移動したような動きになります。

これでもいい方はいいのですが、動きに滑らかさが欲しい！という方にはanimate()を使用する必要があります。

今回指定した$('body,html').animate({scrollTop: 0}, 500);は、{scrollTop: 0}に対して0.5秒のスピードで実行するよう指定しています。

このようにanimate()は、animate()の引数に指定した内容に変化する時間を指定することができます。

みつた
jsで重要な点は以下です！初心者の方にはanimate()の部分の内容が難しく感じるかもしれませんが、一つ一つの内容は難しくないので焦らず一つずつ理解していきましょう。

ポイント

〇 $('#pageTopBtn').on('click', function () {は、pageTopBtnIDをクリックされたら~の部分

〇 animate()の中身の{ scrollTop: 0 }は、指定した要素から0pxの位置に移動するという意味

〇 animate({scrollTop: 0}, 500);は、{scrollTop: 0}に対して0.5秒のスピードで実行する指定

-JavaScript, Web制作