Как создать: кнопку вернуться на верхнюю часть страницы

Как создать кнопку прокрутки к верху страницы

Шаг 1 - Добавление HTML:

Создайте кнопку, нажатие на которую приведет пользователя к верху страницы:

<button onclick="topFunction()" id="myBtn" title="Перейти в верхнюю часть страницы">Вверх</button>

第二步 - Добавление CSS:

устанавливает стиль кнопки:

#myBtn {
  display: none; /* По умолчанию скрыта */
  position: fixed; /* Фиксированное/липкое позиционирование */
  bottom: 20px; /* Поставляет кнопку в 20px от нижнего края страницы */
  right: 30px; /* Поставляет кнопку в 30px от правого края страницы */
  z-index: 99; /* Обеспечивает, что она не перекрывается */
  border: none; /* Удаляет рамку */
  outline: none; /* Удаляет обводку */
  background-color: red; /* Устанавливает цвет фона */
  color: white; /* Цвет текста */
  cursor: pointer; /* Добавляет курсор мыши при наведении */
  padding: 15px; /* Некоторый отступ внутри */
  border-radius: 10px; /* Радиус закругления углов */
  font-size: 18px; /* Увеличивает размер шрифта */
}
#myBtn:hover {
  background-color: #555; /* Добавляет тёмно-серый фон при наведении мыши */
}

Шаг 3 - Добавление JavaScript:

// Получение кнопки:
let mybutton = document.getElementById("myBtn");
// При скролле вниз от верха документа на 20px, показывается кнопка
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// При нажатии на кнопку, скролл возвращается к верху документа
function topFunction() {
  document.body.scrollTop = 0; // Для Safari
  document.documentElement.scrollTop = 0; // Подходит для браузеров Chrome, Firefox, IE и Opera
}

Попробуйте сами