縦に長いホームページでは、ページ下部まで読んだ利用者がメニューや最初の案内へ戻るために、何度もスクロールする必要があります。「トップへ戻る」ボタンを設置すると、長い料金表、施工事例、FAQを読んだあとでも簡単に上へ移動できます。
本記事では、HTML・CSS・JavaScriptで作る基本コードと、スクロールしたときだけ表示する方法を紹介します。
トップへ戻るボタンが役立つページ
サービス紹介が多いページ、商品一覧、長い記事、FAQページなどで役立ちます。一方、1画面程度の短いページでは必要ありません。ボタンを増やすことより、利用者の移動負担があるかで判断します。
ボタンのHTMLを追加する
次のHTMLを</body>の直前へ追加します。
<button
id="back-to-top"
class="back-to-top"
type="button"
aria-label="ページの先頭へ戻る"
>
↑
</button>記号だけでは目的が伝わりにくいため、aria-labelでボタンの役割を補足しています。画像ではなく本物のbutton要素を使います。
CSSで右下に固定する
.back-to-top {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 900;
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
background: #123b5d;
color: #fff;
font-size: 22px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity .2s, transform .2s, visibility .2s;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:focus-visible {
outline: 3px solid #f0b429;
outline-offset: 3px;
}最初は非表示にし、is-visibleクラスが付いたときだけ表示します。問い合わせ固定ボタンがある場合は、bottomの数値を大きくして重ならないように調整してください。
JavaScriptで表示とスクロールを制御する
const backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
const shouldShow = window.scrollY > 500;
backToTop.classList.toggle('is-visible', shouldShow);
});
backToTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});この例では500px以上スクロールすると表示します。ページの長さに合わせて数値を変更できます。
動きを減らす設定にも配慮する
端末でアニメーションを減らす設定を使っている人には、瞬時に移動するようにできます。
const reduceMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;
backToTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: reduceMotion ? 'auto' : 'smooth'
});
});前のクリック処理と置き換えて使用してください。二重に登録すると同じ操作が複数回動くため注意します。
WordPressへ追加するときの注意点
HTMLはフッター付近、CSSは追加CSS、JavaScriptは子テーマやコード追加機能へ入れます。テーマやプラグインに同じ機能がある場合は、二重設置を避けます。
WordPressが自動的にコードを書き換える環境では、テーマの機能や信頼できるコード管理方法を利用してください。
設置後に確認すること
- 一定量スクロールした後だけ表示されるか
- クリックでページ先頭へ戻るか
- キーボードで選択・操作できるか
- 問い合わせボタンやCookie通知と重ならないか
- スマートフォンの横向きでも邪魔にならないか
まとめ
トップへ戻るボタンは、長いページの移動を助ける小さな改善です。常に表示せず、十分にスクロールしたときだけ表示し、既存の固定要素と重ならないように調整しましょう。
コメント