Bootstrap5を使って簡単に実装できる「トップに戻るボタン」の作り方を解説します。
基本的なHTMLコードと、デザインのカスタマイズ、JavaScriptを使った表示タイミングの変更方法についても解説します。
Bootstrap5でトップに戻るボタンを実装する方法
Bootstrap5でトップに戻るボタンを実装する方法を解説します。
Bootstrap5を使った基本的な実装
Bootstrap5を使うことで最初からscroll-behavior: smooth;が適用されているので、以下のようにページ内リンク付きのボタンを実装するだけでトップに戻るボタンを作ることができます。
<a class="btn btn-primary" href="#header"><i class="bi bi-chevron-up"></i></a>以下でフッターに設置する場合の簡単なコードを書いてみます。ボタンのアイコンはこちらの記事で紹介した、無料で使えるBootstrap5アイコンを使用しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
<header id="header" class="bg-light py-4 text-center">Header</header>
<div class="container text-center">
<main class="bg-body-secondary py-5" style="height: 2000px;">Main</main>
</div>
<footer class="py-4 bg-light">
<div class="container d-flex justify-content-between align-items-center">
<p class="fw-bold m-0">LOGO</p>
<a class="btn btn-primary" href="#header"><i class="bi bi-chevron-up"></i></a>
</div>
</footer>
</body>
</html>ブラウザで開くとこちらのようになります。ボタンをクリックするとヌルッとヘッダーまで移動します。
CSSでスムーズにトップに戻るようにする
Bootstrap5ではなくCSSでスムーズにスクロールするには次のようなCSSコードを書く必要があります。
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}このコードをCSSに追加しておくだけでOK。ページ内リンクをつけたボタンをクリックすればBootstrap5と同じようにヌルッと動きます。
常に画面右下に表示されるようにする
上記の例ではフッターに表示していますが、Bootstrap5のposition-fixedクラスを使うことで画面右下に固定表示させることもできます。
<a class="btn btn-primary position-fixed bottom-0 end-0 me-5 mb-5" href="#header"><i class="bi bi-chevron-up"></i></a>これで画面をスクロールしても同じ位置に表示されるようになります。このままだと最初からボタンが表示されることになるのと、フッターにも重なってしまいます。
ある程度スクロールしたらボタンが表示されるようにしたい場合や、フッターの上に来たら止めたい場合はJavascriptを使う必要があります。
スクロールするとトップに戻るボタンが表示されるようにする
スクロールはEventListenerでscrollイベントを受け取れば制御することができます。
このときボタンを識別するため、ボタンにIDをつけておきます。
<a id="top-button" class="btn btn-primary position-fixed bottom-0 end-0 me-5 mb-5" href="#header"><i class="bi bi-chevron-up"></i></a>
<!-- javascript -->
<script>
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
document.getElementById('top-button').style.display = 'block';
} else {
document.getElementById('top-button').style.display = 'none';
}
});
</script>これでトップから300pxスクロールするとボタンが表示されるようになります。
300のところは自由に変更して表示タイミングを調整してください。
トップに戻るボタンがうまく動かない場合の原因と対策
さいごにトップに戻るボタンがうまく動かない場合の原因と対策方法について解説します。
ページ内リンクの入力ミス
ページ内リンクが正しく設定されていないと、ボタンを押してもスクロールしません。
ページ内リンクは以下のようにIDを正しくセットでいているかチェックしてください。
<header id="header"></header>
<a href="#header">ボタン</a>scroll-behaviorの指定ミス
CSSのscroll-behaviorプロパティが間違ったセレクタに書き込まれている場合正しく動かないことがあります。
bodyセレクタに入れて動かないときはhtmlやrootに入れてください。
別の要素が被っている
見えない要素がボタンの上に被さっていてボタンをおすくことができない場合もあります。
Chromeの開発者ツールを使ってボタンの上に要素が重なっていないかなどを確認してみてください。
まとめ
Bootstrap5を使ったトップに戻るボタンの実装について解説しました。内容をまとめると以下のようになります。
- Bootstrap5ではページ内リンク付きのボタンを配置するだけでトップに戻るボタンを実装できる
- Bootstrap5を使うことでスムーズなスクロールに対応できる
- Javascriptを使えば表示タイミングを調整することができる
Bootstrap5ではボタンコンポーネントやアイコンも簡単に使えるので、トップに戻るボタンの実装もすごく楽です。