Bloggerに「上へ戻る」を設置する

1. 機能

【フェード＆スライド連動型・追従ボタン（上へ戻る）】
動的な表示制御とスムーズな操作性を兼ね備えた、ユーザーフレンドリーな追従型ボタンです。

2. デザインの特徴

• 動的な表示制御
  window.scrollY を監視し、200px以上スクロールした時のみ滑らかに浮上（フェードイン＋上昇アニメーション）。
• スムーズな体験
  scroll-behavior: smooth を活用し、クリック時にページ最上部まで優雅にスクロール。
• 洗練されたUI
  右下に固定された円形（border-radius: 50%）のダークモダンなデザイン。
• Font Awesome連携
  アイコンフォント（fa-chevron-up）を使用し、シンプルかつ視認性の高い矢印マークを採用。

3. 紹介コード

HTML・CSS JavaScript

<!-- 上へ戻るボタン本体 -->
<a href='#top' id='page-top'>
<i class='fa-solid fa-chevron-up'/>
</a>

<style>
#page-top {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
background: #333;
color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
}

#page-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

#page-top:hover {
background: #000;
transform: scale(1.1);
}

#page-top i {
font-size: 20px;
}

html {
scroll-behavior: smooth;
}
</style>
  

<script>
//<![CDATA[

(function() {
const pageTop = document.getElementById("page-top");
if (pageTop) {
window.addEventListener("scroll", () => {
if (window.scrollY > 200) {
pageTop.classList.add("show");
} else {
pageTop.classList.remove("show");
}
});

pageTop.addEventListener("click", (e) =&gt; {
  e.preventDefault();
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
});
}
})();
//]]>
</script>