Blog スタッフブログ

JavaScript WEB制作

fixedヘッダーに対応した「ページトップに戻るボタン」を実装

今回は、ヘッダーが fixed で画面上部に固定されている場合でも、ヘッダーと重ならないようにページ上部へ戻す方法を紹介します。

ページトップに戻るボタンを実装すると、クリック時にページの一番上までなめらかにスクロールさせることができます。
ただし、ヘッダーが固定表示になっているサイトでは、そのまま先頭へ戻すと、移動先の内容がヘッダーの下に隠れてしまうことがあります。

そんなときは、ヘッダーの高さをJavaScriptで取得して、その分だけ余白を考慮しながらスクロール位置を調整する 方法が便利です。

今回は、fixedヘッダーの高さを自動取得して、かぶらないようにページトップへ戻す例を紹介します。

HTML側の処理

以下のようなposition:fixedで画面固定しているheaderがあると想定します。

<header id="header" class="header">
  <div class="header__inner">
    <h1>サイトタイトル</h1>
  </div>
</header>

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

CSS側の処理

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.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);
}

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

JavaScript側の処理

ヘッダーの高さを取得し、その高さを考慮してスクロール位置を調整します。

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

pageTopBtn.addEventListener('click', () => {
  const headerHeight = header.offsetHeight;
  const targetElement = document.body;
  const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
  const adjustPosition = targetPosition - headerHeight;

  window.scrollTo({
    top: adjustPosition,
    behavior: 'smooth'
  });
});

固定ヘッダーの高さを数値で決め打ちしてしまうと、デザイン変更やレスポンシブ対応のときにズレが出やすくなります。
そのため、JavaScriptで実際の高さを取得しておけば、PCとスマートフォンでヘッダーサイズが変わる場合にも対応しやすくなります。

また、スクロール先の位置からヘッダーの高さを引くことで、移動後にコンテンツがヘッダーの下へ隠れないように調整できます。

戻る 一覧へ戻る