N-006 Back to Top | Vibe UI Pattern Library

ライブデモ Live Demo

下のエリアをスクロールすると右下に「トップへ戻る」ボタンが表示されます。クリックでスムーズに上へ戻ります。

Scroll the area below to reveal the back-to-top button. Click to smoothly scroll to the top.

表示アニメーション速度 Show/Hide Speed 0.3s

ボタン色 Button Color

AI向け説明 AI Description

`N-006` はスクロールコンテナの `scroll` イベントで `scrollTop` を検知し、一定値以上でボタンに `is-visible` クラスを付与します。クリック時は `scrollTo({ top: 0, behavior: 'smooth' })` でトップへスクロール。ボタンは初期状態で `opacity: 0` と `visibility: hidden` にし、表示時に `transition` でフェードインします。

`N-006` listens to the scroll container's `scroll` event; when `scrollTop` exceeds a threshold, add an `is-visible` class to the button. On click, use `scrollTo({ top: 0, behavior: 'smooth' })`. The button starts with `opacity: 0` and `visibility: hidden`, then fades in via `transition`.

調整可能パラメータ Adjustable Parameters

--backtotop-duration — 表示／非表示のアニメーション時間show/hide transition duration
--backtotop-bg / --backtotop-color — ボタンの背景色・アイコン色button background and icon color
表示しきい値 — 何px スクロールで表示するか（JS）scroll threshold in px (JS)

実装 Implementation

HTML + CSS

<button type="button" class="backtotop-btn" id="backtotop" aria-label="Back to top">
  &#8593; <!-- or SVG arrow -->
</button>

<style>
.backtotop-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #5c6ac4;
  color: #fff;
  border: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.backtotop-btn.is-visible {
  opacity: 1;
  visibility: visible;
}
</style>

<script>
const btn = document.getElementById('backtotop');
window.addEventListener('scroll', () => {
  btn.classList.toggle('is-visible', window.scrollY > 300);
});
btn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
</script>

React (JSX + CSS)

// react/N-006.jsx
import "./N-006.css";
import { useState, useEffect } from "react";

export default function BackToTop({ threshold = 300 }) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > threshold);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [threshold]);

  const scrollTop = () => window.scrollTo({ top: 0, behavior: "smooth" });

  return (
    <button
      type="button"
      className={"backtotop-btn" + (visible ? " is-visible" : "")}
      onClick={scrollTop}
      aria-label="Back to top"
    >
      ↑
    </button>
  );
}

/* react/N-006.css - same as above */

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

以下のUIパターンを実装してください。

- パターンID: N-006
- パターン名: トップへ戻る
- 参照URL: https://devsnips.dev/animations/N-006.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: N-006
- Pattern Name: Back to Top
- Reference URL: https://devsnips.dev/animations/N-006.html
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]

注意とバリエーション Notes & Variations

実際のページでは `position: fixed` でビューポート右下に固定し、`window` のスクロールを監視します。デモではコンテナ内スクロールのため `position: sticky` で表現しています。

In production use `position: fixed` at the viewport bottom-right and listen to `window` scroll. This demo uses a scrollable container with `position: sticky` for the button.