実際の動作⇒https://tan-deki.com/ const backToTopButton = document.addEventListener('DOMContentLoaded', function () {
const backToTopButton = document.getElementById('back-to-top');
backToTopButton.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
});
});
【コードの目的】
このJavaScriptコードは、Webページに「ページトップに戻る」ボタンを作成し、特定の条件下で表示・非表示を切り替えるためのものです。ユーザーがページをある程度スクロールするとボタンが表示され、クリックするとページの一番上へスムーズに移動することができます。
DOMContentLoaded イベントリスナー:
document.addEventListener('DOMContentLoaded', function () { ... }): WebページのDOM（Document Object Model）が完全に読み込まれた後に、中の関数が実行されます。これは、JavaScriptコードがHTMLの要素にアクセスする前に、すべての要素が準備できていることを保証するためです。
-
「戻る」ボタンの取得:
const backToTopButton = document.getElementById('back-to-top');: HTMLの中でIDが'back-to-top'となっている要素（通常はボタン）を取得します。このボタンがクリックされたときの動作を定義します。
-
ボタンクリック時の処理:
backToTopButton.addEventListener('click', () => { ... }): ボタンがクリックされたときに実行される関数を設定します。window.scrollTo({ top: 0, behavior: 'smooth' });: ブラウザウィンドウをページの一番上（top: 0）へスムーズにスクロールします。behavior: 'smooth'によって、カクカクせずに滑らかなスクロールを実現します。
-
スクロールイベントリスナー:
window.addEventListener('scroll', () => { ... }): ユーザーがページをスクロールしたときに実行される関数を設定します。if (window.pageYOffset > 300) { ... } else { ... }: 現在スクロールされている位置（window.pageYOffset）が300ピクセルを超えているかチェックします。- 300ピクセル以上スクロールした場合:
backToTopButton.classList.add('show');: ボタンに'show'というクラスを追加します。CSSでこのクラスに表示に関するスタイルが定義されており、ボタンを表示させる効果があります。
- 300ピクセル未満スクロールした場合:
backToTopButton.classList.remove('show');: ボタンから'show'クラスを削除します。これにより、ボタンが非表示になります。
- 300ピクセル以上スクロールした場合:
まとめ
このコードは、以下の動作を実現します。
- ページが読み込まれると、IDが'back-to-top'のボタンを探します。
- ユーザーが300ピクセル以上スクロールすると、ボタンが表示されます。
- ボタンをクリックすると、ページの一番上へスムーズに移動します。
補足:
- CSS: ボタンの表示・非表示を切り替えるためには、CSSで'.show'クラスに表示に関するスタイルを定義する必要があります。
- カスタマイズ: スクロールのしきい値（300ピクセル）や、ボタンの表示位置、デザインなどは、CSSやJavaScriptを調整することで変更できます。
このコードは、Webページのユーザビリティ向上に役立つ基本的なJavaScriptの例です。
