Skrypt 15: Przycisk „Wróć do góry” po przewinięciu strony

Teoria

Pływający przycisk pojawiający się DOPIERO po przewinięciu strony w dół o określoną odległość, pozwalający jednym kliknięciem wrócić na sam początek strony.

Kod (JavaScript)

<button id="przyciskDoGory" style="display: none;">Do góry ↑</button>

<script>
    const przycisk = document.getElementById("przyciskDoGory");

    window.addEventListener("scroll", function () {
        if (window.scrollY > 300) {
            przycisk.style.display = "block";
        } else {
            przycisk.style.display = "none";
        }
    });

    przycisk.addEventListener("click", function () {
        window.scrollTo({ top: , behavior: "smooth" });
    });
</script>

Komentarz i wyjaśnienie kodu

window.scrollY zwraca aktualną liczbę pikseli, o jaką strona jest przewinięta w pionie — porównanie z 300 pokazuje przycisk dopiero po przewinięciu strony na tyle daleko, żeby powrót "ręcznie" był niewygodny. window.scrollTo({ top: 0, behavior: "smooth" }) płynnie przewija stronę z powrotem na sam początek (identyczny mechanizm smooth co w Skrypcie 4).

Typowe błędy

Częsty błąd to nasłuchiwanie zdarzenia scroll na niewłaściwym elemencie — dla przewijania CAŁEJ strony trzeba nasłuchiwać na obiekcie window, nie na pojedynczym elemencie <div>.