AIによるJavaScriptコードの説明：ページトップに戻るボタン（前記事参照）

実際の動作⇒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ページに「ページトップに戻る」ボタンを作成し、特定の条件下で表示・非表示を切り替えるためのものです。ユーザーがページをある程度スクロールするとボタンが表示され、クリックするとページの一番上へスムーズに移動することができます。

1. DOMContentLoaded イベントリスナー:

   • document.addEventListener('DOMContentLoaded', function () { ... }): WebページのDOM（Document Object Model）が完全に読み込まれた後に、中の関数が実行されます。これは、JavaScriptコードがHTMLの要素にアクセスする前に、すべての要素が準備できていることを保証するためです。

2. 「戻る」ボタンの取得:

   • const backToTopButton = document.getElementById('back-to-top');: HTMLの中でIDが'back-to-top'となっている要素（通常はボタン）を取得します。このボタンがクリックされたときの動作を定義します。

3. ボタンクリック時の処理:

   • backToTopButton.addEventListener('click', () => { ... }): ボタンがクリックされたときに実行される関数を設定します。
     • window.scrollTo({ top: 0, behavior: 'smooth' });: ブラウザウィンドウをページの一番上（top: 0）へスムーズにスクロールします。behavior: 'smooth'によって、カクカクせずに滑らかなスクロールを実現します。

4. スクロールイベントリスナー:

   • window.addEventListener('scroll', () => { ... }): ユーザーがページをスクロールしたときに実行される関数を設定します。
     • if (window.pageYOffset > 300) { ... } else { ... }: 現在スクロールされている位置（window.pageYOffset）が300ピクセルを超えているかチェックします。
       • 300ピクセル以上スクロールした場合:
         • backToTopButton.classList.add('show');: ボタンに'show'というクラスを追加します。CSSでこのクラスに表示に関するスタイルが定義されており、ボタンを表示させる効果があります。
       • 300ピクセル未満スクロールした場合:
         • backToTopButton.classList.remove('show');: ボタンから'show'クラスを削除します。これにより、ボタンが非表示になります。

まとめ

このコードは、以下の動作を実現します。

• ページが読み込まれると、IDが'back-to-top'のボタンを探します。
• ユーザーが300ピクセル以上スクロールすると、ボタンが表示されます。
• ボタンをクリックすると、ページの一番上へスムーズに移動します。

補足:

• CSS: ボタンの表示・非表示を切り替えるためには、CSSで'.show'クラスに表示に関するスタイルを定義する必要があります。
• カスタマイズ: スクロールのしきい値（300ピクセル）や、ボタンの表示位置、デザインなどは、CSSやJavaScriptを調整することで変更できます。

このコードは、Webページのユーザビリティ向上に役立つ基本的なJavaScriptの例です。