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

Александр Мальцев
32K
11
1
Содержание:
  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
    01 февраля 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 февраля 2020, 05:04
      Здравствуйте!
      Вы используете slim-версию jQuery, которая не включает в себя модули ajax и effects. Т.е. она не содержит функции как fadeIn, так и многие другие.
      Чтобы это исправить подключите обычную версию jQuery, например «jquery-3.3.1.min.js» или более новую.
      1. Elena
        02 февраля 2020, 15:16
        Спасибо большое! Подключила еще библиотеку 3.4.1, и заработало только тогда, когда удалила вообще slim версию! Спасибо Вам огромное за помощь, за сайт, за знания и доступные объяснения! Из огромного потока информации и обучающих порталов и сайтов — Ваш самый хороший, изложение более чем грамотное.
        1. Александр Мальцев
          02 февраля 2020, 15:39
          Спасибо за отзыв!
    2. Maxim
      28 января 2018, 14:01
      Добрый день! Сделал по вашей инструкции, в консоли отладки Мозилы появилось сообщение:
      Похоже, что этот сайт использует эффект позиционирования связанный с прокруткой. Это может не очень хорошо работать с асинхронным панорамированием; см. developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects чтобы получить более подробную информацию и присоединиться к обсуждению связанных с этим инструментов и возможностей!

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