スマホで画面右下隅に「その画面トップへ」飛ばすアイコンを表示させるには、HTML、CSS、JavaScriptを組み合わせるのが一般的です。
HTMLコード
まず、HTMLでボタンの要素を配置します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロールトップボタンの例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header style="height: 500px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center;">
<h1>ページのトップ</h1>
</header>
<main style="height: 1500px; background-color: #e0e0e0; padding: 20px;">
<p>ここにページのコンテンツが入ります。下にスクロールするとボタンが表示されます。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</main>
<a href="#" id="scrollTopBtn" class="scroll-top-btn">
<span class="arrow-up"></span>
<span class="text">TOP</span>
</a>
<script src="script.js"></script>
</body>
</html>
解説:
id="scrollTopBtn"とclass="scroll-top-btn"を持つ<a>タグがボタンになります。href="#"を指定することで、クリック時にページのトップに移動します（JavaScriptでスムーズなスクロールを実現します）。<span class="arrow-up"></span>と<span class="text">TOP</span>は、ボタンの見た目を整えるための要素です。矢印アイコンと「TOP」という文字を表示します。
CSSコード (style.css)
次に、ボタンの見た目と配置をCSSで指定します。
CSS
/* ボタンのスタイル */
.scroll-top-btn {
position: fixed; /* 画面に固定 */
bottom: 20px; /* 画面下からの距離 */
right: 20px; /* 画面右からの距離 */
background-color: #007bff; /* ボタンの背景色 */
color: white; /* 文字色 */
padding: 10px 15px; /* 内側の余白 */
border-radius: 5px; /* 角の丸み */
text-decoration: none; /* 下線をなくす */
display: flex; /* アイコンと文字を並べる */
flex-direction: column; /* 縦に並べる */
align-items: center; /* 中央揃え */
justify-content: center; /* 中央揃え */
font-size: 0.9em; /* フォントサイズ */
opacity: 0; /* 最初は非表示 */
visibility: hidden; /* 最初は非表示 */
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* フェードイン/アウトのアニメーション */
z-index: 1000; /* 他の要素の上に表示 */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 影 */
}
/* ボタンが表示されたときのスタイル */
.scroll-top-btn.show {
opacity: 1;
visibility: visible;
}
/* 矢印アイコンのスタイル */
.scroll-top-btn .arrow-up {
border: solid white;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
transform: rotate(-135deg); /* 上向きの矢印 */
-webkit-transform: rotate(-135deg);
margin-bottom: 3px; /* 矢印とテキストの間の余白 */
}
/* ホバー時のスタイル（任意） */
.scroll-top-btn:hover {
background-color: #0056b3;
}
解説:
position: fixed;でボタンを画面に固定します。bottom: 20px;とright: 20px;で画面右下隅に配置します。opacity: 0;とvisibility: hidden;で初期状態では非表示にし、JavaScriptでスクロールに応じて表示/非表示を切り替えます。transitionプロパティで、ボタンの表示/非表示にアニメーションをつけます。z-indexは、他のコンテンツの上にボタンが表示されるようにするためのものです。.arrow-upクラスで、CSSだけでシンプルな上向きの矢印アイコンを作成しています。
JavaScriptコード (script.js)
最後に、スクロールに応じてボタンを表示・非表示にし、クリック時にスムーズにトップへスクロールさせるJavaScriptコードです。
JavaScript
document.addEventListener('DOMContentLoaded', function() {
const scrollTopBtn = document.getElementById('scrollTopBtn');
// スクロールイベントを監視
window.addEventListener('scroll', function() {
// ページのトップからどれくらいスクロールしたかを取得
// document.documentElement.scrollTop は標準的な方法で、
// window.scrollY は一部のブラウザで使われる
const scrollPosition = document.documentElement.scrollTop || window.scrollY;
// ボタンを表示する閾値（例: 200pxスクロールしたら表示）
if (scrollPosition > 200) {
scrollTopBtn.classList.add('show');
} else {
scrollTopBtn.classList.remove('show');
}
});
// ボタンがクリックされたときの処理
scrollTopBtn.addEventListener('click', function(e) {
e.preventDefault(); // デフォルトのアンカーリンクの動作をキャンセル
// スムーズにページのトップへスクロール
window.scrollTo({
top: 0,
behavior: 'smooth' // スムーズスクロール
});
});
});
解説:
DOMContentLoadedイベントリスナーで、HTMLが完全に読み込まれてからJavaScriptを実行します。window.addEventListener('scroll', ...)で、ユーザーがページをスクロールするたびに処理を実行します。scrollPositionを取得し、それが200pxを超えたらボタンにshowクラスを追加して表示します。そうでなければshowクラスを削除して非表示にします。scrollTopBtn.addEventListener('click', ...)で、ボタンがクリックされたときの処理を定義します。e.preventDefault();は、<a>タグのデフォルトの動作（href="#"による瞬時のトップ移動）をキャンセルするために重要です。window.scrollTo({ top: 0, behavior: 'smooth' });で、ページをY座標0（トップ）までスムーズにスクロールさせます。
ファイル構成
上記3つのコードを以下のファイル名で保存し、同じディレクトリに配置してください。
index.html(HTMLコード)style.css(CSSコード)script.js(JavaScriptコード)
これで、スマホでページをスクロールすると右下隅に「TOP」ボタンがフェードインして表示され、クリックするとスムーズにページトップへ戻るようになります。
0 件のコメント:
コメントを投稿