Blog スタッフブログ

JavaScript WEB制作

キービジュアルを過ぎたら表示する「ページトップに戻るボタン」を実装

今回は、キービジュアルを過ぎたタイミングで「ページトップに戻る」ボタンを表示する方法を紹介します。

操作性の向上で便利な戻るボタンですが、常に表示しているとデザインの邪魔になるケースがあります。

スクロール量を数値で判定する場合、レスポンシブの関係で見せたい位置が変わることがあります。
そんなときは、「何pxスクロールしたか」ではなく、特定の要素、例えばキービジュアルの表示が終わったかどうかを基準にすると、ページ構成に合わせて自然に表示を切り替えられます。

実装の流れはシンプルです。
HTMLでページトップに戻るボタンを用意し、CSSで右下に固定配置して最初は非表示にしておきます。
そしてJavaScriptでキービジュアルの位置を取得し、そのエリアを過ぎたらボタンを表示、クリック時にはページ上部までなめらかに戻るようにします。

今回は、キービジュアルの下端を過ぎたら表示する例で紹介します。

HTML側の処理

ページのどこかにmvがあると想定します。

<section class="mv">
  <div>キービジュアルを表示</div>
</section>

そして以下の戻るボタンがあります。

<button id="pageTop" class="page-top">TOP</button>

CSS側の処理

ボタンを画面右下に固定し、初期状態では非表示にしておきます。
表示・非表示を自然に見せるために、opacity と visibility を使っています。

.page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: #333;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.page-top.is-show {
  opacity: 1;
  visibility: visible;
}

.page-top:hover {
  opacity: 0.8;
}

JavaScript側の処理

キービジュアルの下端を過ぎたらボタンを表示し、クリックするとページ上部までなめらかに戻るようにします。

const pageTopBtn = document.getElementById('pageTop');
const mainVisual = document.getElementById('mainVisual');

window.addEventListener('scroll', () => {
  const mvBottom = mainVisual.offsetTop + mainVisual.offsetHeight;

  if (window.scrollY > mvBottom) {
    pageTopBtn.classList.add('is-show');
  } else {
    pageTopBtn.classList.remove('is-show');
  }
});

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

mainVisual.offsetTop + mainVisual.offsetHeight で、キービジュアルの下端位置を取得できます。
そして、現在のスクロール量がその位置を超えたら is-show クラスを付与し、ボタンを表示する仕組みにしています。

この方法なら、「300pxを超えたら表示」のような固定値ではなく、ページごとのレイアウトに合わせた自然な表示切り替えができます。
特に、ファーストビューがしっかり作られているページでは使いやすい実装です。

また、クリック時には window.scrollTo() を使ってページ上部へ移動しています。
behavior: 'smooth' を指定することで、先頭までなめらかにスクロールしながら戻る動きになります。

戻る 一覧へ戻る