こんにちは、さるまりんです 🐒🔧
ページをスクロールしても、右下にずっと表示されているボタンを見たことはありませんか？
例えばこんなものです。
- ページトップへ戻るボタン
- 問い合わせボタン
- メニューを開くボタン
いわゆる フローティングボタン と呼ばれるものですね。
フレームワークを使うと簡単に作れますが、仕組みを知っておくと
- 動きがおかしいときに直せる
- デザイン調整がしやすい
というメリットがあります。
今回は純粋に HTML / CSS / JavaScript だけでフローティングボタンを作ってみました。
まずは完成イメージ
今回作るのはこのようなボタンです。
- スクロールすると表示される
- クリックするとページトップに戻る
- 画面の右下に固定される
HTML
まずはボタンを置きます。
<button id="pageTopBtn">TOP</button>
とてもシンプルですね。
CSS（画面に固定する）
次はCSSです。
#pageTopBtn {
position: fixed;
right: 20px;
bottom: 20px;
padding: 10px 16px;
background: #333;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
#pageTopBtn {
display: none;
}
#pageTopBtn.show {
display: block;
}
ポイントはここです。
position: fixed
これを指定すると、スクロールしても画面の同じ位置に固定されます。
つまり
- bottom: 20px
- right: 20px
で 画面の右下 に配置できます。
JavaScript（スクロール時に表示）
次はスクロールしたときの表示制御です。
const btn = document.getElementById("pageTopBtn");
window.addEventListener("scroll", () => {
if (window.scrollY > 200) {
btn.classList.add("show");
} else {
btn.classList.remove("show");
}
});
ここでは window.scrollY を使っています。
これは「ページがどれくらいスクロールされているか」を取得する値です。
今回は 200px以上スクロールしたら表示 というシンプルな条件にしています。
JavaScript（ページトップへ戻る）
クリックしたときの処理はこちらです。
btn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
ここでは window.scrollTo() を使っています。
top: 0 なのでページの一番上まで移動します。
さらに behavior: "smooth" を指定するとスムーズスクロールになります。
少し変えると「画面上部」にも置ける
さきほどのCSSを少し変えるだけでボタンの位置も変えられます。
例えば右上に配置する場合。
#pageTopBtn {
position: fixed;
right: 20px;
top: 20px;
}
変更したのは bottom → top だけです。
こうすることで画面の右上に固定できます。
「BOTTOMボタン」にする場合
逆に、ページの一番下へ移動するボタンも作れます。
JavaScriptを少し変更するだけです。
btn.addEventListener("click", () => {
window.scrollTo({
top: document.documentElement.scrollHeight,
behavior: "smooth"
});
});
ここでは document.documentElement.scrollHeight を使っています。
これは ページ全体の高さ を取得する値です。
つまりページの一番下までスクロールするボタンになります。
まとめ
今回作ったフローティングボタンは
- HTML → ボタンを置く
- CSS →
position: fixedで画面に固定 - JavaScript → スクロール位置とクリックを制御
この3つで作ることができます。
フレームワークを使うと一瞬ですが、中身はこのような仕組みです。
知っておくと
- 動きがおかしいときに直せる
- デザイン調整ができる
ので、意外と役立つ小ネタです。
次回
今回は HTML / CSS / JavaScript だけで作りました。（この記事にも埋め込んでいます）
次回はこれを WordPressに組み込む方法 をやってみたいと思います。
- どこにHTMLを書くのか
- CSSやJavaScriptはどこに入れるのか
- コピペで使える実装
などをまとめる予定です。
読んでくださってありがとうございます。
それではまた！