Как добавить на сайт кнопку «наверх» для быстрого возврата к началу страницы

Сегодня мы рассмотрим, как добавить на сайт кнопку «наверх», которая позволит пользователям быстро вернуться к началу страницы без необходимости прокручивать весь контент. Это особенно полезно на длинных страницах и улучшает удобство использования сайта.

Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.

Шаг 1: Создание HTML-структуры для кнопки

Для начала создадим HTML-структуру для нашей кнопки. Мы будем использовать тег <a> с идентификатором #top для обозначения места, куда будет происходить прокрутка при клике на кнопку.

<a href="#top" id="back-to-top" class="back-to-top" title="Back to top">▲</a>

Здесь мы использовали символ ▲ для создания стрелки, указывающей вверх. Вы можете использовать любой другой символ или изображение, которое вам нравится.

Шаг 2: Добавление CSS стилей для кнопки

Теперь добавим некоторые стили для нашей кнопки, чтобы она выглядела привлекательно и была видна на странице. Вставьте следующий код в ваш файл CSS:

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  font-size: 24px;
  color: #fff;
  background: #000;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000;
}

.back-to-top:hover {
  background: #333;
  text-decoration: none;
}

Эти стили устанавливают размеры, цвета, положение и видимость кнопки на странице.

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

Шаг 3: Добавление JavaScript кода для показа/скрытия кнопки и плавной прокрутки

Теперь нам нужно добавить немного JavaScript кода, чтобы наша кнопка появлялась и исчезала при прокрутке страницы, а также для реализации плавной прокрутки при клике на кнопку. Вставьте следующий код в ваш файл JavaScript или в тег <script> на вашей странице:

document.addEventListener("DOMContentLoaded", function () {
  const backToTop = document.getElementById("back-to-top");

  // Показать/скрыть кнопку при прокрутке страницы
  window.addEventListener("scroll", function () {
    if (window.pageYOffset > 300) {
      backToTop.style.display = "block";
    } else {
      backToTop.style.display = "none";
    }
  });

  // Плавная прокрутка при клике на кнопку
  backToTop.addEventListener("click", function (event) {
    event.preventDefault();
    window.scrollTo({ top: 0, behavior: "smooth" });
  });
});

Этот код добавляет обработчики событий для показа или скрытия кнопки и плавной прокрутки при клике на нее.

На курсе Skypro «Веб-разработчик» научитесь писать код и тестировать его под руководством опытных наставников. Освоите все необходимые знания и навыки, чтобы стартовать в профессии уверенным младшим специалистом. Программу реально освоить, даже если вы никогда раньше не программировали и ничего не знаете об IT, а материалы курса и регулярные обновления будут доступны навсегда.

Заключение

Теперь у вас есть рабочая кнопка «наверх» на вашем сайте, которая поможет пользователям быстро вернуться к началу страницы. Это улучшит удобство использования сайта и сделает ваш проект более профессиональным. Не забудьте адаптировать стили и внешний вид кнопки в соответствии с дизайном вашего сайта. Удачи в разработке! 😉

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее