ブログの記事が長くなると、読者がページの上に戻りたいときにスクロールが大変になります。そこで便利なのが「ページトップへ戻るボタン」です。
今回の記事では、Bloggerで簡単に右下に固定表示される Font Awesomeアイコンのトップボタン を設置する方法を解説します。
サイドバーのHTML/JavaScriptガジェットへの追加版とテーマのHTMLで編集版の2パターンを用意しています。
「トップに戻る」ボタン完成イメージ
- 右下に丸いボタン
- 200pxスクロールしたら表示
- クリックトップへ戻る
- テーマのスムーススクロールと干渉なし
手順
ガジェット版・HTML編集版 共通
<head> 内にFont Awesomeのコードを貼り付けます
<head>
...
<!-- Font Awesome 読み込み -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
...
</head>
ガジェット版
サイドバーのHTML/JavaScriptガジェットに以下のコードを貼り付けます。
<a href="#" id="page-top">
<i class="fa-solid fa-chevron-up"></i>
</a>
<style>
#page-top {
position: fixed;
right: 20px;
bottom: 30px;
width: 50px;
height: 50px;
background: #333;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-size: 18px;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
#page-top.show {
opacity: 1;
pointer-events: auto;
}
#page-top:hover {
background: #555;
}
</style>
<script>
const pageTop = document.getElementById("page-top");
window.addEventListener("scroll", () => {
if (window.scrollY > 200) {
pageTop.classList.add("show");
} else {
pageTop.classList.remove("show");
}
});
</script>
ボタンをクリックしてもページのトップに移動しない場合 :
テーマHTMLに <div id="top"></div> を追加します。
<body>
<div id="top"></div> <!-- ページ最上部に設置 -->
- <body> 直後に設置する
- これで href="#top" が正しくトップを指すようになります
ボタンHTMLの修正
<a href="#top" id="page-top">
<i class="fa-solid fa-chevron-up"></i>
</a>
- href="#" → href="#top" に変更
HTML編集版
ページ最上部にアンカーを設置
<body>
<div id="top"></div>
</body>直前にボタンHTMLを挿入
<a href="#top" id="page-top">
<i class="fa-solid fa-chevron-up"></i>
</a>
CSS
#page-top {
position: fixed;
right: 20px;
bottom: 30px;
width: 50px;
height: 50px;
background: #333;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-size: 18px;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
#page-top.show {
opacity: 1;
pointer-events: auto;
}
#page-top:hover {
background: #555;
}
</body>直前にスクリプトコードを挿入
<script>
const pageTop = document.getElementById("page-top");
window.addEventListener("scroll", () => {
if (window.scrollY > 200) {
pageTop.classList.add("show");
} else {
pageTop.classList.remove("show");
}
});
</script>
ポイント・補足
- href="#top" と id="top" が必須
- 表示位置（bottom, right）はCSSで調整可能
- スクロール量による表示タイミングもJSで変更可能
まつさん
テーマにスムーススクロールが組み込まれていることを前提にしています。
テーマにスムーススクロールが組み込まれていることを前提にしています。
コメントを投稿