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

Александр Мальцев
Александр Мальцев
34K
11
Содержание:
  1. Создание кнопки вверх для сайта
  2. Комментарии

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

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

Процесс создания кнопки вверх начнём с 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
Изменение цвета кнопки для прокрутки страницы вверх

Комментарии:

  1. Elena
    Elena
    01.02.2020, 23:14
    Здравствуйте! У меня не работает скрипт. Все сделано в точности, как у Вас. Но ошибка в отладчике: Uncaught TypeError: $(...).fadeIn is not a function
    at dispatch (VM292 jquery-3.3.1.slim.min.js:2)
    at v.handle (VM292 jquery-3.3.1.slim.min.js:2)
    Не та библиотека подключена?
    1. Александр Мальцев
      Александр Мальцев
      02.02.2020, 05:04
      Здравствуйте!
      Вы используете slim-версию jQuery, которая не включает в себя модули ajax и effects. Т.е. она не содержит функции как fadeIn, так и многие другие.
      Чтобы это исправить подключите обычную версию jQuery, например «jquery-3.3.1.min.js» или более новую.
      1. Elena
        Elena
        02.02.2020, 15:16
        Спасибо большое! Подключила еще библиотеку 3.4.1, и заработало только тогда, когда удалила вообще slim версию! Спасибо Вам огромное за помощь, за сайт, за знания и доступные объяснения! Из огромного потока информации и обучающих порталов и сайтов — Ваш самый хороший, изложение более чем грамотное.
        1. Александр Мальцев
          Александр Мальцев
          02.02.2020, 15:39
          Спасибо за отзыв!
    2. Maxim
      Maxim
      28.01.2018, 14:01
      Добрый день! Сделал по вашей инструкции, в консоли отладки Мозилы появилось сообщение:
      Похоже, что этот сайт использует эффект позиционирования связанный с прокруткой. Это может не очень хорошо работать с асинхронным панорамированием; см. developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects чтобы получить более подробную информацию и присоединиться к обсуждению связанных с этим инструментов и возможностей!

      Стоит ли обращать внимание на это предупреждение?
      1. Александр Мальцев
        Александр Мальцев
        29.01.2018, 15:01
        Да, можете на данное предупреждение не обращать внимание. Firefox его отображает, если обнаруживает наличие связанного с прокруткой эффекта на странице. Это касается прокрутки не в основном потоке, которое выполняется с опозданием. На указанной странице предлагается советы как это можно исправить.
        Но в скрипте для кнопки «Вверх» мы отслеживаем прокрутку в основном потоке и нас эти советы не касаются.
        1. Maxim
          Maxim
          29.01.2018, 15:09
          Спасибо за оперативный ответ!
      2. Денис Гедз
        Денис Гедз
        14.01.2018, 23:16
        Спасибо Вам большое за прекрасный сайт! И отдельно за эту статью! Спасибо!
        1. pastukh88
          pastukh88
          12.07.2017, 03:00
          Если не работает, то проверьте, нет ли у вас в css height: 100% для body. Если есть, то решается так: codepen.io/anon/pen/IwGcF
          1. Roman
            Roman
            12.06.2016, 13:09
            Чесно говоря это одни из самых понятных и «прозрачных» обьяснений к урокам.
            Спасибо вам за ваш труд.
            1. Дмитрий
              Дмитрий
              14.03.2016, 03:17
              Александр, статья, под которой нет «спасибо» :) Исправляю ситуацию — спасибо! :)
              Ваш сайт замечателен, а то что вы делаете — очень полезно, уверен, многим.
              Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.