Кнопка ВВЕРХ для скролла страницы

Кнопка ВВЕРХ для скролла страницы

Пример простой кнопки ВВЕРХ для скроллинга страницы к началу есть на CODEPEN

На странице нужно сделать кнопку <button id="scrollToTopBtn">Вверх</button>


// Получаем кнопку
const scrollToTopBtn = document.getElementById("scrollToTopBtn");

// Показываем кнопку при скролле ниже 500px
window.onscroll = function() {
    if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
        scrollToTopBtn.style.display = "block";
    } else {
        scrollToTopBtn.style.display = "none";
    }
};

// Функция для скролла до верха страницы
scrollToTopBtn.onclick = function() {
    window.scrollTo({
        top: 0,
        behavior: "smooth" // Плавный скролл
    });
};


#scrollToTopBtn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none; /* Скрываем кнопку по умолчанию */
            padding: 10px 15px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            z-index: 1000;
        }
        #scrollToTopBtn:hover {
            background-color: #0056b3;
        }