ページをスクロールした際に右下に「トップへ戻る」ボタンの実装方法を説明します。
トップへ戻るボタンDEMO
まずは実装内容を確認しましょう、DEMOページをご覧ください。
コピペ用実装コード
index.html style.css script.jsを作成し、以下のコードを貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>トップへ戻るボタン</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<section class="section-1">
<h2>レスポンシブデザイン</h2>
<p>近年は、モバイルでの閲覧を優先し、PC向けのデザインはそれに合わせて作られるようになっています。</p>
</section>
<section class="section-2">
<h2>UI/UXデザインの基本</h2>
<p>UI/UXデザインとは、ユーザーが直面する問題やニーズを考慮しつつ、使いやすく、美しいインターフェースをデザインすることです。</p>
</section>
<section class="section-3">
<h2>カラーコントラストの重要性</h2>
<p>テキストやボタンなどのUI要素と背景色との間の色の差を指します。</p>
</section>
<!-- トップに戻るボタン -->
<a href="#" id="page_top">TOP</a>
</body>
</html>body {
margin: 0;
}
section {
min-height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 50px;
color: #fff;
}
.section-1 {
background-color: #ff779f;
clip-path: polygon(0 0, 100% 100px, 100% 100%, 0 calc(100% - 100px));
}
.section-2 {
color: #000000;
}
.section-3 {
background-color: #59bcfd;
clip-path: polygon(0 100px, 100% 0, 100% calc(100% - 100px), 0 100%);
}
#page_top {
width: 60px;
height: 60px;
line-height: 70px;
display: none;
position: fixed;
right: 30px;
bottom: 30px;
color: #fff;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
display: inline-block;
text-decoration: none;
text-align: center;
}
#page_top::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 60px;
height: 60px;
background-color: #333;
z-index: -1;
}$(function () {
var topBtn = $('#page_top');
topBtn.hide();
$(window).on('scroll', function () {
// 100pxスクロールしたら、ボタンを表示する100pxより上なら非表示
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
// スクロールして上に戻る
topBtn.on('click', function (e) {
e.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 500);
});
});実装方法
See the Pen Back to top button by SOLLUNA (@ygi) on CodePen.
HTML
headタグの中にCSSを読み込みます。
<link rel="stylesheet" href="css/style.css">headタグの中にjQueryを読み込むためのCDNリンクを追加します。
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>headタグの中にJSを読み込みます。
<script src="js/script.js"></script>CSS
#page_top {
width: 60px;
height: 60px;
line-height: 70px;
display: none;
position: fixed;
right: 30px;
bottom: 30px;
color: #fff;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
display: inline-block;
text-decoration: none;
text-align: center;
}
#page_top::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 60px;
height: 60px;
background-color: #333;
z-index: -1;
}最初は非表示にするためにdisplay: none;を設定します。position: fixed; right: 30px; bottom: 30px; ボタンを画面の右下に固定しますす。
clip-path: polygon(…); でボタンを五角形に変更します。
position: absolute; でボタン要素内で絶対位置を指定します。top: 50%; left: 50%; でボタンの中央に配置しtransform: translate(-50%, -50%); で疑似要素の中心がボタンの中心にくるように調整します。
JS
$(function () {
var topBtn = $('#page_top');
topBtn.hide();ページが読み込まれたらトップに戻るボタンhide()関数使用し非表示します。
$(window).on('scroll', function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});スクロールイベントが発生するとコールバック関数が実行されます。
ブラウザの現在のスクロール位置scrollTop()が100pxより大きいかどうかをチェックします。100pxより大きい場合はfadeIn()関数を使ってトップに戻るボタンを徐々に表示します。100px以下の場合はfadeOut()関数を使ってボタンを徐々に非表示にします。
topBtn.on('click', function (e) {
e.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 500);
});クリックイベントが発生するとコールバック関数が実行されます。e.preventDefault()を使ってデフォルトのイベント動作(ページがリンク先に移動する動作)をキャンセルします。その後、animate()関数を使ってブラウザのスクロール位置を0(ページの最上部)に500ミリ秒(0.5秒)かけてアニメーションさせます。これにより、スムーズにページトップに戻る動作が実現されます。
トップに戻るボタン(五角形)作り方
