При скролле страницы на сайте часто возникает потребность вернутся наверх. Например, в контентных сайтах при прочтении статьи необходимо вернуться обратно в меню. Мы разработаем кнопку наверх на чистом JS, чтобы помочь пользователям с прокруткой страницы.

Навигация по статье

Полезные ссылки

Пример работы кнопки наверх: https://toni.codelab.pro/go-top/index.html
Стартовый проект на Github: https://github.com/toni-wheel/base-page

Создаем кнопку наверх

Кнопка наверх появляется при прокрутке вниз, когда мы попадет опускаемся ниже одного экрана браузера (100vh). При нажатии на кнопку нас плавно поднимает наверх (скорость можно регулировать). Для демонстрации работы кнопки я создал одностаничник (вы можете скачать его по ссылке).

Вставляем кнопку в разметку

В файле index.html в самый конец разметки вставляем наш элемент кнопки:

<div class="go-top">▲</div>

▲ — это Unicode-символ треугольника. Вы можете использовать любой символ, либо вставить внутри div’а нужное вам изображение стрелки

Стилизация кнопки наверх

Комментарии даны прямо в CSS:

.go-top {
  position: fixed; /* фиксированное позиционирование */
  left: 20px; /* отступ слева 20px */
  top: 50%; /* выравниваем по центру */
  transform: translateY(-50%); /* выравниваем по центру */
  cursor: pointer; /* при наведении меняем курсор */
  display: none; /* по умолчанию скрываем кнопку */
  font-size: 20px;
  color: rgba(0, 51, 153, 0.5);
  border: 1px solid rgba(0, 51, 153, 0.5);
  background-color: rgba(0, 51, 153, 0.1);
  padding: 15px 10px;
}

/* меняем прозрачность при наведении мышкой */
.go-top:hover {
  color: rgba(0, 51, 153, 0.8);
  border: 1px solid rgba(0, 51, 153, 0.8);
  background-color: rgba(0, 51, 153, 0.15);
}

/* модификатор для отображения кнопки */
.go-top--show {
  display: block;
}

Скрипт для кнопки наверх

Скрипт довольно простой. Комментарии также даны в коде:

// считываем кнопку
const goTopBtn = document.querySelector(".go-top");

// обработчик на скролл окна
window.addEventListener("scroll", trackScroll);
// обработчик на нажатии
goTopBtn.addEventListener("click", goTop);

function trackScroll() {
  // вычисляем положение от верхушки страницы
  const scrolled = window.pageYOffset;
  // считаем высоту окна браузера
  const coords = document.documentElement.clientHeight;
  // если вышли за пределы первого окна
  if (scrolled > coords) {
    // кнопка появляется
    goTopBtn.classList.add("go-top--show");
  } else {
    // иначе исчезает
    goTopBtn.classList.remove("go-top--show");
  }
}

function goTop() {
  // пока не вернулись в начало страницы
  if (window.pageYOffset > 0) {
    // скроллим наверх
    window.scrollBy(0, -75); // второй аргумент - скорость
    setTimeout(goTop, 0); // входим в рекурсию
  }
}

-75 — это скорость прокрутки. Чем меньше значение — тем выше скорость. Например при -100 будет возвращаться почти мгновенно.