【コピペOK】ページの上部に戻る機能を実装するためのJavaScriptコード

ページの上部に戻る機能を実装するためのJavaScriptコードは比較的簡単です。ここでは、”TOPに戻る”ボタンを押すとページの上部にスムーズにスクロールする機能を追加する方法を示します。

まず、HTMLにボタンを追加します。以下はその例です。

<button id="backToTop">TOPに戻る</button>

次に、JavaScriptを使用してボタンのクリックイベントにスムーズスクロール機能を追加します。

document.getElementById('backToTop').addEventListener('click', function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});

このコードは、backToTop IDを持つ要素（この場合はボタン）にクリックイベントリスナーを追加します。ボタンがクリックされると、window.scrollTo関数が実行され、ページの最上部にスムーズにスクロールします。behavior: 'smooth' はスクロールが滑らかに行われるようにするためのオプションです。