生のJavaScriptで「トップへ戻る」ボタン実装

1. HTML

まず、ボタンを配置するためのHTMLを用意します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Button Example</title>
    <style>
        /* ボタンのスタイル */
        #topButton {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 99;
            border: none;
            outline: none;
            background-color: #000;
            color: white;
            cursor: pointer;
            padding: 15px;
            border-radius: 10px;
        }

        #topButton:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
    <button id="topButton" title="Go to top">Top</button>

    <!-- サンプルコンテンツ -->
    <div style="height: 1500px; padding: 20px;">
        <h1>Scroll down to see the "Top" button</h1>
        <p>Scroll down to see the "Top" button appear in the bottom right corner.</p>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS

ボタンのスタイルはHTML内に記述していますが、外部CSSファイルを使うこともできます。

3. JavaScript

次に、ボタンの表示・非表示と、クリック時のスクロール動作を制御するJavaScriptを用意します。

 script.js

// ボタン要素を取得
const topButton = document.getElementById("topButton");

// ページのスクロール時に呼び出される関数
window.onscroll = function() {
    scrollFunction();
};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        // ページが20px以上スクロールされたらボタンを表示
        topButton.style.display = "block";
    } else {
        // ページが20px未満のスクロールの場合ボタンを非表示
        topButton.style.display = "none";
    }
}

// ボタンクリック時に呼び出される関数
topButton.onclick = function() {
    scrollToTop();
};

function scrollToTop() {
    // スムーズにトップへスクロール
    window.scrollTo({top: 0, behavior: 'smooth'});
}

説明

HTML
- buttonタグを用いて、「トップへ戻る」ボタンを作成します。ボタンにはid="topButton"を付けて、JavaScriptで簡単に取得できるようにします。
- サンプルコンテンツとして、高さ1500pxのdivを用意し、スクロールの動作を確認できるようにします。
CSS
- ボタンのスタイルを定義します。position: fixedでボタンを画面の右下に固定し、最初はdisplay: noneで非表示にします。
- hover時のスタイルも定義し、ボタンにマウスを合わせたときに色が変わるようにします。
JavaScript
- ページがスクロールされた時にonscrollイベントが発火し、scrollFunctionが呼ばれます。この関数で、スクロール位置が20px以上ならボタンを表示し、それ以下なら非表示にします。
- ボタンがクリックされたときにscrollToTop関数が呼ばれ、ページのトップへスムーズにスクロールします。window.scrollTo({top: 0, behavior: 'smooth'})を使用してスムーズスクロールを実現します。