N-006 Navigation simple

How to create a back to top トップへ戻るの作り方

Button that appears on scroll and smoothly scrolls back to top on click. スクロール時に表示され、クリックでページトップへスムーズに戻るボタン。

back to top scroll navigation button

ライブデモ Live Demo

0.3s

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Button that appears on scroll and smoothly scrolls back to top on click.

スクロール時に表示され、クリックでページトップへスムーズに戻るボタン。

どこで使うかWhere to use

website header, dashboard sidebar, mobile menu, admin panel

長いページ、ブログ記事、ドキュメントサイト、ランディングページ

特徴Key features

Floating back-to-top button that appears after scrolling past a threshold. Smooth scroll animation on click. CSS transition handles show/hide. Positioned fixed at bottom-right. Minimal footprint — under 1KB.

スクロール閾値を超えると表示されるフローティングトップへ戻るボタン。クリック時のスムーズスクロールアニメーション。CSSトランジションで表示/非表示を処理。右下にfixed配置。最小フットプリント — 1KB未満。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--backtotop-duration—show/hide transition duration
--backtotop-bg / --backtotop-color—button background and icon color
表示しきい値—scroll threshold in px (JS)

実装コード Implementation Code 

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



<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/N-006.css - same as above */
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>
  );
}
:root {
  --backtotop-duration: 0.3s;
  --backtotop-bg: #5c6ac4;
  --backtotop-color: #fff;
}

.backtotop-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--backtotop-bg);
  color: var(--backtotop-color);
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(92, 106, 196, 0.4);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--backtotop-duration) ease,
    visibility var(--backtotop-duration) ease,
    transform var(--backtotop-duration) ease,
    background var(--backtotop-duration) ease;
}

.backtotop-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.backtotop-btn:hover {
  background: #4c5bb5;
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

A scroll event listener compares window.scrollY to a threshold (e.g., 300px). When exceeded, a visible class is added to the button, transitioning opacity and transform from hidden to visible. Clicking the button calls window.scrollTo({ top: 0, behavior: "smooth" }). IntersectionObserver on a top sentinel is a more performant alternative.

スクロールイベントリスナーがwindow.scrollYを閾値（例：300px）と比較。超えた場合、visibleクラスがボタンに追加されてopacityとtransformを非表示から可視にトランジション。ボタンのクリックでwindow.scrollTo({ top: 0, behavior: "smooth" })を呼び出し。上部センチネルのIntersectionObserverがよりパフォーマンスの良い代替手段。

カスタマイズ方法Customization

Replace the arrow icon with a custom SVG or progress ring that shows reading progress. Add a ripple effect on click. Use right: env(safe-area-inset-right) on iOS to respect notch areas.

矢印アイコンをカスタムSVGまたは読書進捗を表示するプログレスリングに置き換え。クリック時にリップルエフェクトを追加。iOSのノッチエリアを尊重するためright:env(safe-area-inset-right)を使用。

注意点Caveats

Provide an aria-label (e.g., "Back to top") on the button since it has no visible text label. Ensure the button does not cover important page content — especially on mobile where the viewport is narrow.

ボタンに可視テキストラベルがないためaria-label（例："先頭に戻る"）を提供してください。特にビューポートが狭いモバイルで、ボタンが重要なページコンテンツを覆わないようにしてください。

よくある質問 Frequently Asked Questions

How to customize the back to top? Back to Topをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the back to top in React? ReactでBack to Topを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of back to top? Back to Topのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

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

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.