長いウェブページを閲覧する際、ページの最下部までスクロールしてしまうと再びページトップに戻るのが面倒です。このような課題を解決するために、スクロールに合わせてTOPへ戻るボタンを表示させる機能を実装することをおすすめします。シンプルな機能ですが、ユーザービリティを大きく向上させることができます。今回は、その実装方法をご紹介します。
スクロールに合わせてTOPボタンを表示/非表示する
まず、ページ下部にスクロールするとTOPへ戻るボタンが表示され、ページトップにいるときは非表示になる機能を実装します。
- HTML: ボタン要素を設置
- CSS: ボタンのスタイリングと初期状態では非表示に
- JavaScript: スクロール量に応じて表示/非表示を切り替え
手順1: HTMLにボタン要素を設置
<button id="topBtn">TOP</button>
手順2: CSSでボタンのスタイリングと初期非表示設定
#topBtn {
display: none; /* 初期状態では非表示 */
position: fixed; /* ウィンドウ内で固定表示 */
bottom: 20px; /* 下からの位置 */
right: 30px; /* 右からの位置 */
font-size: 18px;
border: none;
outline: none;
background-color: #333; /* 背景色 */
color: white; /* テキスト色 */
cursor: pointer; /* マウスカーソルの形状 */
padding: 15px; /* 余白 */
border-radius: 4px; /* 角の丸み */
}
手順3: JavaScriptでスクロール量に応じて表示/非表示を切り替え
// ボタンの要素を取得
const topBtn = document.getElementById("topBtn");
// ウィンドウがスクロールされた際の処理
window.onscroll = function() {
// 現在のスクロール量を取得
const scrollAmount = window.pageYOffset || document.documentElement.scrollTop;
// 一定量スクロールされたら表示
if (scrollAmount > 300) {
topBtn.style.display = "block";
} else {
topBtn.style.display = "none";
}
}
クリックでTOPへスムーズにスクロール
次に、ボタンをクリックするとページ最上部へスムーズにスクロールする機能を追加します。
// ボタンクリック時の処理を追加
topBtn.onclick = function() {
// スムーズにスクロールする関数を実行
smoothScroll();
}
// スムーズスクロールを実装する関数
function smoothScroll() {
const targetY = 0; // スクロール先の位置 (トップ)
const currentY = window.pageYOffset || document.documentElement.scrollTop; // 現在のスクロール位置
const distance = targetY - currentY; // 移動距離
const duration = 1000; // スクロールにかける時間(ミリ秒)
const start = null; // アニメーション開始時刻
// スクロールアニメーションにかける処理
window.requestAnimationFrame(step);
// スムーズスクロールを実行する関数
function step(timestamp) {
if (!start) start = timestamp; // 開始時刻の設定
const elapsed = timestamp - start; // アニメーションの経過時間
const ease = elapsed / duration; // 時間による補間値
// 線形補間でスクロール位置を決定
window.scrollTo(0, currentY + distance * ease);
// アニメーションが終了するまで繰り返し実行
if (elapsed < duration) {
window.requestAnimationFrame(step);
}
}
}
このように実装することで、スクロールに合わせてボタンが表示/非表示され、クリックでページ最上部へスムーズにスクロールできるようになります。
自動でページTOPに戻る機能を追加
さらに、ページを長時間放置するとTOPに自動で戻る機能を追加できます。
let timer; // タイマー変数
// 一定時間後にスクロールを戻す処理
window.onload = resetTimer; // ページ読み込み時にタイマーを開始する処理を実行
window.onmousemove = resetTimer; // マウスを動かすとタイマーをリセット
window.onkeydown = resetTimer; // キー入力でもタイマーをリセット
function resetTimer() {
// タイマーをクリアする
clearTimeout(timer);
// 3分後にページTOPへ自動スクロールする
timer = setTimeout(smoothScroll, 180000);
}
これで、3分間ユーザーがページを操作しないと、自動的にページ最上部へスムーズスクロールするようになります。
以上の手順で、スクロールに合わせてTOPへ戻るボタンが表示/非表示され、ボタンをクリックするとスムーズにページ最上部へスクロールできるようになります。さらに自動でページトップに戻る機能も追加できます。比較的シンプルな実装ですが、ユーザービリティが大幅に向上するので、ぜひウェブサイトに導入することをおすすめします。
(Visited 18 times, 1 visits today)