Главная JavaScript Кнопка "вверх"

Кнопка "вверх"

Как создать кнопку прокрутки к началу страницы?

1) создаем кнопку:
<button onclick="topFunction()" id="myBtn">Вверх<button>
      

2) добавляем CSS кнопки:
<style>
#myBtn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 16%;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 20px 6px;
  border-radius: 50%;
</style>

3) добавляем JavaScript:
<script>
// Когда пользователь прокручивает документ на 800 пикселей вниз, появляется кнопка.
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

//Когда пользователь нажимает кнопку,  документ прокрутися вверх.
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

см. ДЕМО ► см. ДЕМО-2 ►