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

Урок, на котором рассмотрим процесс создания кнопки для сайта, возвращающей пользователя в верхнюю часть страницы.

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

Процесс создания кнопки вверх начнём с HTML разметки. В качестве изображения будем использовать иконку в формате шрифта (Glyphicon Halflings, Font Awesome или др.).

<div class="scrollup">
  <!-- Иконка fa-chevron-up (Font Awesome) -->
  <i class="fa fa-chevron-up"></i>
</div>
Внимание: Шрифт Font Awesome и стили CSS должны быть подключены к странице.

После создания разметки напишем стили CSS, которые будут располагать нашу кнопку в нужном месте, задавать ей оформление и изменять цвет её фона при наведении курсора.

div.scrollup {
  position: fixed; /* фиксированная позиция */
  color: #fff; /* цвет текста */
  background-color: #286090; /* цвет заднего фона */
  right: 20px; /* расстояние от правого края */
  bottom: 0px; /* расстояние от нижнего края */
  padding: 4px 10px; /* отступы до содержимого блока */
  font-size: 20px; /* размер шрифта (иконки) */
  border-top-left-radius: 4px; /* скругление верхнего левого угла */
  border-top-right-radius: 4px; /* скругление верхнего правого угла */
  cursor: pointer; /* форма курсора */
  display: none; /* не отображать элемент */
  text-align: center; /*выравнивание содержимого элемента по центру */
}
div.scrollup:hover {
  background-color: #000; /* цвет заднего фона при наведении */
}
Кнопка для прокрутки страницы вверх
Кнопка для прокрутки страницы вверх

Единственное что нам осталось ещё сделать, это написать скрипт на языке JavaScript (+ библиотека jQuery), который будет выполнять следующее:

  • отображать кнопку или нет, в зависимости от того прокрутил ли пользователь страницу больше чем на 200px вниз от верхнего края или нет;
  • при нажатии на кнопку прокручивать страницу вверх с анимацией.
<script>
$(function() {
  // при нажатии на кнопку scrollup
  $('.scrollup').click(function() {
    // переместиться в верхнюю часть страницы
    $("html, body").animate({
      scrollTop:0
    },1000);
  })
})
// при прокрутке окна (window)
$(window).scroll(function() {
  // если пользователь прокрутил страницу более чем на 200px
  if ($(this).scrollTop()>200) {
    // то сделать кнопку scrollup видимой
    $('.scrollup').fadeIn();
  }
  // иначе скрыть кнопку scrollup
  else {
    $('.scrollup').fadeOut();
  }
});
</script>

В вышеприведённом примере была использована иконка fa-chevron-up из шрифта Font Awesome. Кроме этой иконки, можно использовать любую другую иконку из этого шрифта или любого другого.

Примеры кнопок для прокрутки страницы вверх
Примеры кнопок для прокрутки страницы вверх

Изменение цвета кнопки вверх

При необходимости Вы можете настроить цвет, размер, расположение и многие другие параметры кнопки вверх, просто изменив настройки вышепредставленных правил CSS. Например, изменяя цвет заднего фона (background-color) Вы можете получить следующие кнопки:

Изменение цвета кнопки вверх с помощью CSS-свойства background-color
Изменение цвета кнопки для прокрутки страницы вверх


   JavaScript и jQuery 0    1979 +2

Комментарии (2)

  1. Дмитрий # 0
    Александр, статья, под которой нет «спасибо» :) Исправляю ситуацию — спасибо! :)
    Ваш сайт замечателен, а то что вы делаете — очень полезно, уверен, многим.
    1. Roman # 0
      Чесно говоря это одни из самых понятных и «прозрачных» обьяснений к урокам.
      Спасибо вам за ваш труд.

      Вы должны авторизоваться, чтобы оставлять комментарии.