ユーザーがページをスクロールした際に「トップへ戻る」ボタンが表示されると、便利で直感的なナビゲーションが実現できます。今回は、JavaScriptとCSSを使って、ページトップに戻るボタンをスクロール位置に応じて表示・非表示する方法を解説します。また、ページ下部ではボタンがフッターの上に固定されるようにします。
手順
1. HTMLで「トップへ戻る」リンクを作成する
HTML
<a id="scrollTopBtn" href="javascript:void(0);" onclick="scrollToTop()"><span></span></a>
2. CSSでボタンのスタイルと位置を設定する
次に、CSSでボタンのデザインと位置を指定します。このコードではボタン内に上向きの矢印がセンターに位置するように調整しています。
CSS
#scrollTopBtn {
position: fixed;
right: 20px;
background-color: #a2a2a2;
color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 100;
}
#scrollTopBtn span {
transform: rotate(-45deg);
width: 12px;
height: 12px;
border-top: 3px solid;
border-right: 3px solid;
margin-top: 5px;
display: block;
}
3. JavaScriptでスクロールに応じた動作を設定する
JavaScriptを使い、スクロール位置に応じてボタンを表示・非表示に切り替えます。また、ページ下部ではボタンがフッターの上10pxの位置に固定されるようにします。
JavaScript
window.onscroll = function() {
const scrollTopBtn = document.getElementById("scrollTopBtn");
const footer = document.querySelector("footer");
const footerTop = footer.getBoundingClientRect().top + window.scrollY; // フッターの絶対位置
const windowHeight = window.innerHeight;
const scrollY = window.scrollY;
// スクロール量が100px以上の場合、戻るボタンを表示
if ($(this).scrollTop() > 100) {
$('#scrollTopBtn').fadeIn();
} else {
$('#scrollTopBtn').fadeOut();
}
// ボタンをフッター上10pxで止める
if (scrollY + windowHeight > footerTop + 10) {
scrollTopBtn.style.bottom = `${windowHeight - (footerTop - scrollY) + 10}px`;
} else {
scrollTopBtn.style.bottom = "20px";
}
};
まとめ
今回の手法を使うことで、ユーザーが快適にページを利用できる「トップへ戻る」ボタンを実装できます。スクロールに応じてボタンが自動で表示され、さらにフッターに重ならないよう停止位置を調整することで、デザインと利便性を両立できます。ユーザーは迷うことなくページトップへ戻れるため、特に長いページでのユーザー体験が向上します。
