• Теория
  • Теория

Показываем кнопку «Наверх»

Мы научились узнавать величину вертикальной прокрутки. Если пользователь прокрутил больше 200px, на странице должна появиться кнопка «Наверх». В разметке это элемент с классом up-button:

<button class="up-button" type="button">
  ↑
  <span class="visually-hidden">Наверх</span>
</button>

А вот так кнопка будет выглядеть в браузере:

Найдём кнопку с помощью метода querySelector и запишем её в переменную.

Изначально кнопка не видна и должна появиться, если страница прокручена больше, чем на 200px. Чтобы определить, нужно ли показывать кнопку, добавим внутрь обработчика событий onscroll условную конструкцию и с помощью оператора сравнения «больше» сравним величину прокрутки с числом 200:

if (window.pageYOffset > 200) {
  // Если условие истинно, показываем кнопку
}

Чтобы кнопка появилась, ей нужно добавить класс shown. Используем для этого метод classList.add. Затем прокрутим страницу и убедимся, что кнопка «Наверх» появляется.

Без JavaScript будущему разработчику никуда. Записывайтесь на профессиональный курс по JavaScript первого уровня, проходящий c 18 июня по 19 августа 2024. До 11 апреля цена 26 900 ₽30 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Прокрутка и операторы» тренажёра «Знакомство с JavaScript» можно после регистрации и оформления подписки.