JavaScript

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

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

Pyxofy

Mar 24, 2024 • 7 min read

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

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

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

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

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

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

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

  // ページのトップへ戻る処理
  // …

});

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

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

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

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

構文：

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

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

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

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

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

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

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

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

  // ボタンの表示／非表示を切り替える処理
  // …

});

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

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

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

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.