HTML/CSS/JSでシンプルな上に戻るボタンの実装

上に戻るボタンの実装です。

HTML

<button id="backToTop" class="back-to-top">↑</button>

CSS

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: none; /* 最初は非表示 */
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1000;
}

.back-to-top:hover {
    background-color: #555;
}

.back-to-top.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

JS

document.addEventListener("DOMContentLoaded", function () {
    const backToTop = document.getElementById("backToTop");

    window.addEventListener("scroll", function () {
        if (window.scrollY > 300) {
            backToTop.classList.add("show");
        } else {
            backToTop.classList.remove("show");
        }
    });

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

HTML

シンプルなボタン要素を用意。

id=”backToTop” でJavaScriptから操作可能に。

CSS

position: fixed; で画面の右下に固定。

display: none; で最初は非表示。

スクロール時にshowクラスが付くと表示される。

JavaScript

window.scrollY > 300 のときにボタンを表示。

クリックするとスムーズにトップへ戻る (window.scrollTo({ top: 0, behavior: “smooth” }))。

以上です。

Share This…