Мяу! Слишком долго скроллить страницу. Сделай кнопку «Наверх»!

Главная страница новостного сайта, над которым мы работали в стартовом тренажёре и прошлых частях, очень длинная. Если пользователь прочитал все новости и хочет вернуться к началу, ему надо долго прокручивать страницу. Кекс хочет, чтобы мы запрограммировали кнопку, которая прокрутит страницу наверх автоматически.

Кнопка изначально не видна и должна появиться, если пользователь прокрутил страницу больше, чем на 200px. Почему именно 200? А кот его знает! Если на кнопку нажали, страница должна прокрутиться к началу, а сама кнопка после этого — исчезнуть.

Чтобы выполнить задание босса, нам нужно знать, когда пользователь прокручивает страницу. JavaScript следит за всем, что происходит в окне браузера, в том числе за прокруткой. Мы можем сказать ему, что делать, если страницу прокрутили. Для этого используем обработчик событий onscroll. Он срабатывает каждый раз, когда страницу прокручивают, даже если её сдвинули всего на один пиксель.

Чтобы отслеживать прокрутку на новостном сайте, добавим обработчик событий окну мини-браузера. Окно (или вкладка) браузера в JavaScript обозначается словом window:

window.onscroll = function () {
  console.log('Страница прокручена');
}

Проверим, как работает обработчик onscroll.