ページの上部に戻るボタンを作る

さまざまなWebサイトで見かける、ワンクリックでページの上部にスクロールして戻るボタン

その作り方をご紹介します。

完成イメージ

まずはこちらのサンプルをご確認ください。

See the Pen 304-01 by subaru (@subaru_works) on CodePen.

ピンクのエリアを上下にスクロールすると、画面右下に「ページ上部に戻る」ボタンが表示されます。

このボタンをクリックすると、スルスル～っとページの上部にスクロールで戻ります。
ピンク色のエリアがスクロールされていない時はボタンは表示されません。

実装方法

HTML

HTML要素で必要なのは、ボタンになる要素だけです。

<div class="to-pagetop">ページ上部に戻る</div>

今回は <div> で作成していますが、
<a> や <button> などでも問題ありません。

クリックされる要素には固有のClassやId等を設定し、JSで要素を取得できるようにしておきます。

CSS

次にCSSで簡単にスタイルを設定します。

先ほどのクリックする要素のClassかIdを使って、スタイルを設定します。

.to-pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 16px;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

まずは、position: fixed; でクリック要素の位置を画面の右下に固定します。

画面の端にピッタリくっついていると気持ち悪かったので、右と下に20pxの空白を持つようにしました。

今回はdiv要素で作成したため、マウスの動作に反応しないため、
cursor: pointer; でカーソルが乗った場合のカーソルスタイルを追加しました。
クリック要素を <a> などで作成している場合はこの設定は不要です。

JavaScript

JavaScriptを使って、実際の挙動を設定しています。

const pagetopBtn = document.querySelector('.to-pagetop');

toScrollTop = () => {
  // スクロールの挙動
  window.scroll({
    top: 0,
    behavior: "smooth"
  });
}

pagetopBtn.addEventListener('click', toScrollTop);

クリック要素の指定

const pagetopBtn = document.querySelector('.to-pagetop');

1行目：HTMLで作成したクリック要素を指定して変数に格納しておきます。

スクロールの動きを指定

3行目～9行目：ページの上部に戻るスクロールの関数を作成します。

window.scroll({ ... }) でブラウザのスクロール位置を変更することができます。

今回はページの上部に戻るボタンなので、スクロール位置は top: 0 を指定しました。

behavior では、スクロールがどの様に動くかを指定しています。
設定できる値は以下の3つ。

smooth:
スムーズにアニメーションしながらスクロールします
instant:
アニメーションぜず、即座にジャンプします
auto:
スクロールの挙動はCSSでのscroll-behaviorの指定に従います

実際の挙動や、詳しい仕様は下記を確認してください
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

クリックイベントを指定

pagetopBtn.addEventListener('click', toScrollTop);

11行目：クリック要素にクリックイベントを登録します。

最初にクリック要素を格納した変数：pagetopBtn に .addEventListener で
クリックされた時の挙動を指定します。

今回は.to-pagetop 要素をクリックした時に、先程作成したtoScrollTop関数 を呼び出すようにしています。

最低限の機能が完成

以上でページの上部に戻るボタンが機能するようになりました。

ここからはもう少し表示をリッチにしてみようと思います。

最初の完成イメージで設定していた…
スクロールしていない時はボタンが非表示で、スクロールが発生するとボタンがふわっと表示
するようにしてみます。

この設定を行います。

JavaScript

const pagetopBtn = document.querySelector('.to-pagetop');

toScrollTop = () => {
  window.scroll({
    top: 0,
    behavior: "smooth"
  });
}

const scrollEvents = () => {
  if (window.scrollY > 100) {
    pagetopBtn.classList.add('is-shown');
  } else if (window.scrollY < 100) {
    pagetopBtn.classList.remove('is-shown');
  }
}

pagetopBtn.addEventListener('click', toScrollTop);
window.addEventListener('scroll', scrollEvents);

先程のJSのコードに、ハイライトで示した部分を追記しました。

まずはscrollEvents関数を追加し、
その中で画面がスクロールされているかを判定します。

const scrollEvents = () => {
  if (window.scrollY > 100) {
    pagetopBtn.classList.add('is-shown');
  } else if (window.scrollY < 100) {
    pagetopBtn.classList.remove('is-shown');
  }
}

window.scrollY で現在の画面スクロール量を取得し、
スクロール量が 100 よりも大きい場合は、クリック要素に Class: is-shown を付与します。
スクロール量が 100 よりも小さい場合は、クリック要素から Class: is-shown を削除します。

19行目：画面のスクロールを監視するイベントハンドラを追加します。

こちらは最初の「クリックのイベント登録」と似ていますが、今回は「画面のスクロール」に反応します。
画面をスクロールするたびに scrollEvents関数 を呼び出し、スクロール量の判定を行います。

CSS

次に、CSSを追加しています。

.to-pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 16px;
  background-color: #333;
  color: #fff;
  opacity: 0;
  transition: opacity 400ms ease;
  cursor: pointer;
}
.to-pagetop.is-shown {
  opacity: 1;
}

こちらもハイライト部分を追加しました。

まずは通常のボタンの状態を追加します。

opacity: 0; を指定して、初期の状態ではクリック要素を見えない状態にします。

次に、transition: opacity 400ms ease; で opacity に対してのアニメーションを設定します。

今回は、 opacity の値を 400ミリ秒で ease の動きで推移するようにしました。
（ease:始まりと終わりが遅く、中間が早く動く）

12～14行目：クリック要素に Class: is-shown が付与されたときは opacity: 1 になるようにスタイルを追加します。

完成

以上で冒頭に紹介した「ページの上部に戻るボタン」が完成しました

See the Pen 304-01 by subaru (@subaru_works) on CodePen.

基本的な作りを把握するとサクッと作れるので急な依頼があっても安心ですね

おまけ：あえてJavaScriptで作るワケ

「ページの上部に戻るボタン」の作り方などをネット検索すると、jQueryを使った方法での記述が多く見つかります。

もちろん、jQueryでも作成できます。

また、細かなアニメーションの設定などを行いたい場合はjQueryを使った方が
書きやすい場合もあるかと思います。

近年では「jQueryはオワコン」なんて言う人もいますが、
jQueryが使える環境であればjQueyを使っても良いと思います。

それでも今回、あえてJavaScriptで作成したのは…
ページ上部に戻るボタンの実装のためだけにjQueryの読み込みを追加するのが嫌な場合が多いからです。

先ほど紹介した通り、今回のページ上部に戻るボタンだけを実装する場合、JSファイルのコードは
わずか20行ほど…

jQueryを利用する場合…

jQuery本体をDLしてきて
HTMLファイルから読み込める位置に配置して
読み込みのタグをHTMLに記述する

という3ステップが発生しますが、
JavaScriptの動作環境は現在の主要ブラウザのほとんどが持っているため
JavaScriptで記述している場合はこのステップが不要になります。

私自身、Webページの製作でjQueryを使う機会は間違いなく減っているなと感じています。
昔に比べはるかにJavaScriptの記述も簡単になり、あえてjQueryを使う必要が無い場面が増えた
という印象です。

実際のWebページでは他にもJSを利用した動きのあるページを作成することが多いので、他のJSの挙動などと合わせてJavaScriptのみで行くのか、jQueryを利用するのかを選択するのが良いかと思います。