JavaScript - トップへ戻るボタンの作り方

scrollTo() メソッドや scroll イベントなどを使用して、ウェブページの一番上へ滑らかにスクロールするボタンを JavaScript で作ります。簡単なコードなので JavaScript 初心者の方もぜひ試してみてください。

JavaScript - トップへ戻るボタンの作り方
Photo by Gilly / Unsplash

トップへ戻るボタンとは?

下へスクロールしながらウェブページを見ている途中で、ページの一番上まで戻りたくなることありますよね。そんなときに便利なのが、トップへ戻るボタンです。ボタンをクリックするだけで、ページの最上部までスクロールすることができます。

今回は、トップへ戻るボタンを JavaScript で作る方法を一緒に学んでいきましょう。

この記事を読むと分かること

  • window.scrollTo()
  • click イベント
  • scroll イベント
  • window.scrollY

サンプルプロジェクト

最初に、これから作っていくボタンの動きを下のサンプルプロジェクトで確認しておきましょう。スクロールする前は、トップへ戻るボタンは見えません。ある程度下へスクロールすると、ページの右下にボタンが現れます。ボタンをクリックするとページの一番上まで滑らかにスクロールし、トップへ戻るボタンは消えます。

HTML

では早速、HTML から書いていきましょう。トップへ戻るボタンは <button> 要素で作ります。

<div class="container">
  <h1>Scroll to Top Button</h1>
  <nav>Navigation Area</nav>
  <section>
    <h2>Heading 1</h2>
    <p>
    </p>
  </section>
  <section>
    <h2>Sub Section</h2>
    <p>
    </p>
  </section>
  <section>
    <h2>Heading 2</h2>
    <p>
    </p>
  </section>
  <section>
    <h2>Heading 3</h2>
    <p>
    </p>
  </section>
  <footer>Footer Area</footer>

  <!--ボタンを作成-->
  <button class="topButton">TOP</button>

</div>

CSS

続いて CSS です。ボタンの表示は display: none とし、最初は非表示です。ボタンの位置は position: fixed で固定し、ページの右下に表示されるようにしますよ。

body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100%;
  min-width: 393px;
  margin: 5px;
  border: 5px solid lightgray;
}

h1,
h2,
nav,
section,
footer {
  text-align: center;
  padding: 10px 50px;
}

h2,
p {
  border-radius: 10px;
}

nav,
footer {
  font-size: 1.5rem;
  color: white;
}

nav {
  background: #085bb5;
  height: 50px;
}

h2 {
  background: #eeeeee;
}

section {
  padding: 20px;
}

p {
  padding: 10px 50px;
  height: 150px;
  border: 2px solid #c0c0c0;
}

footer {
  background: #08b95b;
  height: 200px;
}

/*トップへ戻るボタン*/
.topButton {
  display: none;   /*非表示*/
  position: fixed; /*位置を固定*/
  bottom: 30px;
  right: 30px;
  width: 80px;
  height: 80px;
  background-color: #0d7df5;
  font-size: 20px;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid lightgray;
}

.topButton:hover {
  font-weight: bold;
  background-color: #f99f3e;
  border: 5px solid lightgray;
}

次のセクションからは、トップへ戻るボタンに動きをつけるための JavaScript を書いていきます。

JavaScript

JavaScript では、トップへ戻るボタンをクリックしたらページの一番上までスクロールするようにコーディングします。また、ボタンを表示するか非表示にするかは、スクロールの量で決めますよ。次の手順でコードを書いていきましょう。

  1. ボタンにクリックイベントを追加する
  2. ボタンをクリックしたらページのトップへ戻る
  3. ウィンドウにスクロールイベントを追加する
  4. ボタンの表示/非表示を切り替える

ボタンにクリックイベントを追加する

トップへ戻るボタンを JavaScript で操作できるよう、ボタン要素を querySelector() メソッドで取得しておきます。

//トップへ戻るボタンを取得
const topButton = document.querySelector('.topButton');

トップへ戻るボタンをクリックしたらページの最上部へスクロールするように、ボタンに click イベントを追加しましょう。

//トップへ戻るボタンにクリックイベントを追加
topButton.addEventListener('click', () => {

  /*====================
  ページのトップへ戻る処理;
  ====================*/

});

イベントについてはこちらで解説していますので参考にしてください。

JavaScript - ボタンクリックでメッセージを表示する方法【初心者向け】
ユーザーの操作をきっかけに動く JavaScript の書き方を紹介します。ボタンのクリックに反応するシンプルなコードを書きながら、要素の取得やイベント、イベントハンドラーやイベントリスナーなどの基本を解説します。

ボタンをクリックしたらページのトップへ戻る

ページのトップへ戻るために使うのは、window.scrollTo() メソッドです。

window.scrollTo() は、括弧 () に指定した位置までページをスクロールします。また、このメソッドは、波括弧 {} でオプションを指定することができます。オプションを指定すると、スクロールする位置だけでなく、スクロールをどのような動きにするかを決めることができますよ。

構文:

window.scrollTo({
  top: y座標,
  left: x座標,
  behavior: 'スクロールの動き'
});

ページの一番上までスクロールさせたいので、top の値は 0 とします。スクロールの動きを表す behaviorsmooth を指定すると、一瞬で戻るのではなく、滑らかな動きのスクロールになります。

//ページの一番上へ滑らかにスクロールする
window.scrollTo({   
  top: 0,
  behavior: 'smooth'
});

ボタンをクリックしたらページの最上部へ滑らかにスクロールするコードは以下のようになります。

//ボタンをクリックしたらページの最上部へ滑らかにスクロールする
topButton.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
    });
});

ウィンドウにスクロールイベントを追加する

トップへ戻るボタンは、最初は非表示に設定しましたね。ユーザーが下へスクロールしたらボタンを表示し、上へスクロールしたら再び非表示にします。どれだけスクロールされているかを知るために、ウィンドウに scroll イベントを追加しましょう。

//ウィンドウにスクロールイベントを追加
window.addEventListener('scroll', () => {

  /*=============================
  ボタンの表示/非表示を切り替える処理;
  =============================*/

});

ボタンの表示/非表示を切り替える

ボタンを表示するか非表示にするかを決めるのは、if 文です。ページ上部からのスクロール量によって表示/非表示を切り替えますよ。

if 文については以下の記事で詳しく解説していますのでご覧ください。

JavaScript - 条件分岐の基本 - if 文の書き方と true, false の意味
if 文は、「もし〇〇ならAをする、そうじゃなかったらBをする」のように、条件によって処理を分岐させるための文です。if 文を理解する際に必要になる、真理値(真偽値)の true と false についても、一緒に学んでいきましょう。

if 文の条件で、上からのスクロール量を表す window.scrollY プロパティの値を調べます。ここでは、ページの上から 300px の位置より多くスクロールしたかどうかで処理を分けますよ。

//もし上から300pxよりスクロール量が多いなら
if(window.scrollY > 300) {

  /*=============================
  ボタンの表示/非表示を切り替える処理;
  =============================*/

}

ページの上から 300px より多くスクロールしたらボタンを表示します。そうでなければボタンを非表示にしましょう。

if(window.scrollY > 300) {
  //トップへ戻るボタンを表示
  topButton.style.display = 'block';
} else {
  //トップへ戻るボタンを非表示
  topButton.style.display = 'none';
}

スクロールの量によってボタンの表示/非表示を切り替えるコードは以下のようになります。

//スクロールの量によってボタンの表示/非表示を切り替える
window.addEventListener('scroll', () => {
  if(window.scrollY > 300) {
    topButton.style.display = 'block';
  } else {
    topButton.style.display = 'none';
  }
});

完成コード

トップへ戻るボタンのコードが完成です。

/**************************/
/* トップへ戻るボタンのコード */
/**************************/

const topButton = document.querySelector('.topButton');

topButton.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

window.addEventListener('scroll', () => {
  if(window.scrollY > 300) {
    topButton.style.display = 'block';
  } else {
    topButton.style.display = 'none';
  }
});

See the Pen JavaScript - Scroll to Top Button by Pyxofy (@pyxofy) on CodePen.


まとめ

今回は、クリックするとページの最上部へスクロールするボタンを JavaScript で作りました。

短く簡単なコードですが、イベントの追加や if 文で処理を分ける方法、要素のスタイル(見た目)を切り替える方法などを、分かりやすく学べたのではないでしょうか。

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです!

SNSで Pyxofy とつながりましょう! LinkedInThreadsMastodon X (Twitter) @pyxofyFacebook

関連記事

JavaScript - ボタンを押して表示を切り替える方法
ボタンをクリックしてコンテンツの表示 / 非表示を切り替えたり、ウェブページの表示をダークモードにする方法を解説します。CSS に切り替えたいクラスを追加して toggle() メソッドで切り替えるだけなので簡単です。
CSS Art – How to Make Gradients
Gradients are powerful tools for your CSS art tool belt. We’ll learn about linear, radial and conic gradients. Then let’s make repeating patterns.
CSS Animation
Articles for creating CSS Animation.
Scratch - Pyxofy
Scratch 3.0の使い方を、プログラミング初心者や子どもにも分かりやすく紹介しています。