ページトップへ飛び立つ！CSSとJSで作る“ロケット発射風”スクロールボタン

11月 11, 2025 11月 11, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

スクロールが長いページで便利な「ページトップボタン」。
でも、ただ上に戻るだけでは少し味気ない…。

そこで今回は、クリックするとまるでロケットが発射するように上昇していく、
遊び心あふれる「ロケット発射風ページトップボタン」の作り方をご紹介します。

CSSアニメーションとJavaScriptのスクロール制御を組み合わせることで、
まるで空に飛び立つような視覚的な動きが楽しめます。

基本構造：ロケットボタンを配置する

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

まずはHTML構造を用意します。
画像を使ってもOKですが、ここではシンプルな絵文字ロケット🚀を使います。

 <button id="rocketBtn" class="rocket-btn">🚀</button>

次に、CSSで初期スタイルを整えます。

body {
    height: 2000px;
    background: linear-gradient(#0b0d22, #1a1f3a);
    color: white;
    font-family: sans-serif;
  }
  .rocket-btn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    font-size: 2rem;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: radial-gradient(circle at center, #ff5959, #b30000);
    box-shadow: 0 0 15px rgba(255, 80, 80, 0.8);
    transition: transform 0.3s;
  }

この時点では、画面右下に丸いボタンが配置されています。
続いて、クリック時の「発射」演出を実装します。

ロケット発射アニメーションを実装する

クリックするとボタンが上昇していくアニメーションをCSSで定義します。

@keyframes launch {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    50% {
      transform: translateY(-200px) scale(1.2);
    }
    100% {
      transform: translateY(-100vh);
      opacity: 0;
    }
  }
  .rocket-launch {
    animation: launch 1s ease-in forwards;
  }

JavaScriptでクリックイベントを設定し、
アニメーションと同時にページトップへスクロールします。

  const rocketBtn = document.getElementById("rocketBtn");
  rocketBtn.addEventListener("click", () => {
    rocketBtn.classList.add("rocket-launch");
    window.scrollTo({ top: 0, behavior: "smooth" });
    setTimeout(() => {
      rocketBtn.classList.remove("rocket-launch");
    }, 1000);
  });

これで、クリック時にロケットが上昇し、
ページがスムーズにトップへ戻るようになります。

発展アレンジ：発射の“煙”と“光”を追加する

さらにリアルに見せたい方は、ロケットの下に“煙”のアニメーションを追加してみましょう。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

  .rocket-btn::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
    opacity: 0;
  }
  .rocket-launch::after {
    animation: smoke 1s ease-in forwards;
  }
  @keyframes smoke {
    0% {
      opacity: 0.8;
      transform: translate(-50%, 0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, 80px) scale(3);
    }
  }

発射の瞬間に光と煙が出て、より“飛び立つ感”が増します。
ロケットの発射サウンドを加えれば、臨場感も抜群です。