Урок, на котором рассмотрим процесс создания кнопки для сайта, возвращающей пользователя в верхнюю часть страницы.
Создание кнопки вверх для сайта
Процесс создания кнопки вверх начнём с HTML разметки. В качестве изображения будем использовать иконку в формате шрифта (Glyphicon Halflings, Font Awesome или др.).
<div class="scrollup"> <!-- Иконка fa-chevron-up (Font Awesome) --> <i class="fa fa-chevron-up"></i> </div>
После создания разметки напишем стили 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) Вы можете получить следующие кнопки:

at dispatch (VM292 jquery-3.3.1.slim.min.js:2)
at v.handle (VM292 jquery-3.3.1.slim.min.js:2)
Не та библиотека подключена?
Вы используете slim-версию jQuery, которая не включает в себя модули ajax и effects. Т.е. она не содержит функции как fadeIn, так и многие другие.
Чтобы это исправить подключите обычную версию jQuery, например «jquery-3.3.1.min.js» или более новую.
Похоже, что этот сайт использует эффект позиционирования связанный с прокруткой. Это может не очень хорошо работать с асинхронным панорамированием; см. developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects чтобы получить более подробную информацию и присоединиться к обсуждению связанных с этим инструментов и возможностей!
Стоит ли обращать внимание на это предупреждение?
Но в скрипте для кнопки «Вверх» мы отслеживаем прокрутку в основном потоке и нас эти советы не касаются.
Спасибо вам за ваш труд.
Ваш сайт замечателен, а то что вы делаете — очень полезно, уверен, многим.