Как сделать скрытие кнопки при скроле?

Александр в очередной раз огромное спасибо за решение! Работает js просто изумительно!) Осталось разобраться с валидатором который постоянно на меня ругается… Если будет время не могли бы вы мельком посмотреть что нужно исправить или добавить и как валидней прописать эту кнопку? Сама кнопка меня по оформлению полностью устраивет и минимальна по коду, но валидатора это не волнует…

HTML

<div class="to-up">
 <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M3 10l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E" alt="Стрелка вверх">
 </div> 

CSS — я так понимаю учитывая js код можно вообще не указывать display: none и убрать этот пункт из css?

.to-up {
  position: fixed; /* фиксированная позиция */
  color: #fff; /* цвет текста */
  background-color: #3aa111; /* цвет заднего фона */
  right:  5px; /* расстояние от правого края */
  bottom: 80px; /* расстояние от нижнего края */
  padding: 13px 13px; /* отступы до содержимого блока */
  border-radius: 100%; 
  cursor: pointer; /* форма курсора */
  display: none; /* не отображать элемент */
  text-align: center; /*выравнивание содержимого элемента по центру */
}
div.to-up:hover {
  background-color: orange; /* цвет заднего фона при наведении */
}

@media screen and (min-width: 480px) {
  .to-up {
  right: 20px; /* расстояние от правого края */
  }
}

Codepen -> codepen.io/man129/pen/NWdBNrd

Огромное спасибо! ;)

Пожалуйста!
В HTML верстку можно сделать просто такой (саму стрелку создать через псевдоэлемент, например, ::before):

<div class="to-up"></div>

CSS:

.to-up {
  position: fixed; /* фиксированная позиция */
  color: #fff; /* цвет текста */
  background-color: #3aa111; /* цвет заднего фона */
  right: 20px; /* расстояние от правого края */
  bottom: 40px; /* расстояние от нижнего края */
  border-radius: 100%; 
  cursor: pointer; /* форма курсора */
  display: none; /* не отображать элемент */
  width: 40px;
  height: 40px;
}
.to-up::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 10px;
  top: 10px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M3 10l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E");
}
div.to-up:hover {
  background-color: orange; /* цвет заднего фона при наведении */
}

Codepen: codepen.io/itchief/pen/NWdBRqZ

Александр, вы гений и спаситель! Огромное человеческое Спасибо!)

Здравствуйте! Решил воспользоваться вашим методом создания кнопки «вверх». Скопировал ваш код из примера выше все работает как надо. Но если зайти в ваш codepen, там есть часть javascript кода которого нет в примере. И я не могу разобраться за что он отвечает. Сама кнопка работает как с этим кодом так и без него. Объясните пожалуйста за что все таки он отвечает. Я новичок в javascript, можно сказать только знакомлюсь с этим языком и практически ни чего не понимаю)
Вот эта часть непонятного для меня кода которую вы указали в codepen:

document.addEventListener("DOMContentLoaded", function() {
  function hasTouchDevice() {
    return !!('ontouchstart' in window || navigator.maxTouchPoints);
  }
  if (!hasTouchDevice()) {
    const toUp = document.querySelector('.to-up');
    toUp.onmouseenter = function(){
      this.classList.add('hover');
    }
    toUp.onmouseleave = function() {
      this.classList.remove('hover');
    }
  }
});

А вот сам код из примера и тот который я взял за пример:
HTML

<div class="to-up"></div>

CSS

.to-up {
  position: fixed; /* фиксированная позиция */
  color: #fff; /* цвет текста */
  background-color: #3aa111; /* цвет заднего фона */
  left: 10px; /* расстояние от правого края */
  bottom: 53px; /* расстояние от нижнего края */
  border-radius: 100%; 
  cursor: pointer; /* форма курсора */
  display: none; /* не отображать элемент */
  width: 44px;
  height: 44px;
}
.to-up::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 12px;
  top: 12px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M3 10l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E");
}
.to-up:hover {
  background-color: #61b340; /* цвет заднего фона при наведении */
}

JS

document.addEventListener("DOMContentLoaded", () => {
  let toTopBtn = document.querySelector(".to-up");
  let pageYOffset = 0;
  let timeout;
  window.onscroll = function () {
    if (timeout) {
      window.clearTimeout(timeout);
    }
    if (window.pageYOffset > 900) {
      toTopBtn.style.display = "block";
    } else {
      toTopBtn.style.display = "none";
    }
    pageYOffset = window.pageYOffset;
    timeout = window.setTimeout(function(){
      if (window.pageYOffset === pageYOffset) {
        toTopBtn.style.display = "none";
      }
    }, 3000);
  }
  // плавный скролл наверх
  toTopBtn.addEventListener("click", function () {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  });
});

Повторюсь сама кнопка работает что с непонятным мне кодом, что без него. Помогите пожалуйста разобраться за что отвечает этот непонятный мне код. Спасибо!

Здравствуйте! Функция hasTouchDevice проверяет имеет ли это устройство тач-экран. Если не имеет, то при вхождения курсора в .to-up добавляет ему класс hover, при покидании удаляет его. Если этот функционал нужен, то добавьте этот код.

Александр, здравствуйте! Теперь разобрался. Спасибо вам!