下にスクロールしたら「ページトップへ戻る」を表示させたい

3枚の写真はダミーです。

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>go-to-top.html</title>
        <style>
            #button {
                position: fixed;
                bottom: 15px;
                right: 25px;
                opacity: 0;
                z-index: 9999;
            }
        </style>
    </head>
    <body>
        <p><img src=https://picsum.photos/1000?random=1″></p>
        <p><img src=https://picsum.photos/1000?random=2″></p>
        <p><img src=https://picsum.photos/1000?random=3″></p>
        <p><div id="button">
            <a href="#top">▲TOPへ戻る</a>
        </div>
        <script>
            window.addEventListener("scroll", function () {
                const button = document.getElementById("button");
                const scroll = window.pageYOffset;
                if (scroll > 1000) {
                    button.style.opacity = 0.4;
                } else
                    button.style.opacity = 0;
            });
        </script>  
    </body>
</html>

最後までお読みいただきありがとうございます。

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します!