# ページトップへ戻るボタンのCSS実装

> 右下に固定される「↑ トップへ」ボタン。アンカーリンクとscroll-behaviorだけのJSなし実装で、どのページにもすぐ足せます。

- カテゴリ: ナビゲーション
- URL: https://www.css-dictionary.com/recipes/back-to-top/

## HTML

```html
<header id="page-top" class="head">ページの先頭</header>
<p style="height: 400px">（スクロール用の余白）</p>
<p>ページの末尾です。右下のボタンで先頭へ戻れます。</p>

<a href="#page-top" class="to-top" aria-label="ページの先頭へ戻る">↑</a>
```

## CSS

```css
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.head {
  padding: 12px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 8px;
  font-weight: 600;
}

.to-top {
  position: fixed;
  inset: auto 16px 16px auto; /* 右下に固定 */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #cbbfa5;
  border-radius: 50%;
  background: #fff;
  color: #5c5445;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  transition: border-color 0.15s, color 0.15s;
}

.to-top:hover,
.to-top:focus-visible {
  border-color: #b0413e;
  color: #b0413e;
}

.to-top:focus-visible {
  outline: 2px solid #b0413e;
  outline-offset: 2px;
}
```

## 仕組みの解説

「トップへ戻る」はボタンではなくアンカーリンク（href="#id"）で作ると、JSゼロで完成しキーボードでもそのまま動きます。position: fixed + inset で右下に固定し、移動の滑らかさは scroll-behavior: smooth に任せます。リンクの中身は「↑」だけなので、意味は aria-label で伝えます。

## 実装のポイント

「一定量スクロールしたら表示」まで作り込む場合はJSでの出し分けか、animation-timeline: scroll()（新しめ）を検討してください。

## AIに依頼するときの文例

ページトップへ戻るボタンをJSなしで作ってください。href="#id"のアンカーリンクをposition: fixedで右下に固定し、scroll-behavior: smoothで滑らかに移動、aria-labelとfocus-visibleも付けてください。

## 使っているプロパティ

- [position](https://www.css-dictionary.com/property/position.md)
- [inset](https://www.css-dictionary.com/property/inset.md)
- [scroll-behavior](https://www.css-dictionary.com/property/scroll-behavior.md)
- [place-items](https://www.css-dictionary.com/property/place-items.md)