Делаем идеальную стрелку вверх для сайта (код ScrollUp)

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

Мои критерии для ScrollUp:

1. Простота кода.
2. Легкая встраиваемость в любой сайт и любую систему управления (CMS).
3. Максимальное использование CSS для прорисовки самой стрелки и анимации (появление/исчезновение).
4. Минимальное использование скриптов.
5. Отказ от использования для оформления стрелки картинок (полупрозрачные .gif и т.д.).
6. Стрелка должна появляться не сразу, а после некоторой прокрутки страницы.
Для начала нарисуем стрелку:

<style>

/*–Back to Top ———–*/
.scroll-top {
background:#2896d6;
box-shadow:0 0 2px rgba(0,0,0,0.4);
bottom:20px;
height: 40px;
width: 40px;
position: fixed;
border-radius: 1px;
right: 20px;
text-align: center;
overflow: hidden;
z-index: 9999;
opacity: 0.5;
}
.scroll-top i {
font-size: 14px;
line-height: 40px;
color:#fff!important;
}

</style>

<!–Scroll To Top–>
<a href=”/#” class=”scroll-top” style=”display: none;”><i class=”fa fa-chevron-up”></i></a>
<!–/Scroll To Top–>

Вы, наверное, сразу заметили, что для самой стрелочки используется символ из шрифта FontAwesome ““. Подключим его с CDN Google вместе с JQuery:

<link rel=”stylesheet” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

Часто на сайтах, использующие библиотеку bootstrap и стрелку скроллинга Scroll to Top делают на нем. Меня такой подход не устраивает т.к. есть разные сайты, на которых эта библиотека подключена и такие, где она не используется. Сама библиотека довольно тяжелая и прилично замедляет загрузку сайта и я не хотел бы зависеть от ее наличия. Тем более, есть планы полностью отказаться от ее использования в пользу более легких специализированных решений. От чего отказаться лично для меня не удастся, так это от библиотеки JQuery. Сама JQuery разных версий имеется практически на всех имеющихся у меня сайтах и поэтому было решено использовать ее.

Как использовать JQuery

На многих сайтах с помощью Java Script и JQuery выполнено именно плавное появление стрелки. Код при этом получается похожий на этот:

$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$(‘.scroll-top’).fadeIn();
} else {
$(‘.scroll-top’).fadeOut();
}
});

JQuery для анимации плавного появления объекта с классом “.scroll-top” (это стрелка и есть) к нему последовательно добавляется style=”opacity:0.0001;” до style=”opacity:1;”. Мне такое решение не нравится не только тем, что код в момент всех этих переборов нагружает страницу и на слабых компьютерах может подтормаживать, но также и тем, что при любой ошибке в скриптах на странице стрелка или не появляется совсем или висит видимая постоянно. Сам же блок со стрелкой должен иметь такое свойство: style=”display: none;“, которое после всех этих переборов прозрачности меняется на style=”display: block;“. Но вернемся к этому позже, а сейчас соберем все вместе и посмотрим, что у нас получилось.

Код плавной прокрукрутки вверх выглядит так:

$(‘.scroll-top’).click(function () {
$(“html, body”).animate({
scrollTop: 0
}, 600);
return false;
});

Добавляем в качестве фона картинку и собираем код:

body {
background-image: url(construct-bg.jpg);
background-position: left top;
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
}
```
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body {
    background-image: url(construct-bg.jpg);
    background-position: left top;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: scroll;
}
/*—Back to Top ————*/
.scroll-top {
background:#2896d6;
box-shadow:0 0 2px rgba(0,0,0,0.4);
bottom:20px;
height: 40px;
width: 40px;
position: fixed;
border-radius: 1px;
right: 20px;
text-align: center;
overflow: hidden;
z-index: 9999;
opacity: 0.5;
}
.scroll-top i {
font-size: 14px;
line-height: 40px;
color:#fff!important;
}
</style>
</head>
<body>
<p>-- 001 --</p>
<p> * -- * </p>
<p>-- 040 --</p>

<!—Scroll To Top—>
<a href="/#" class="scroll-top" style="display: none;"><i class="fa fa-chevron-up"></i></a>
<!—/Scroll To Top—>
<script>
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scroll-top').fadeIn();
} else {
$('.scroll-top').fadeOut();
}
});
$('.scroll-top').click(function () {
	$("html, body").animate({
		scrollTop: 0
	}, 600);
	return false;
});
</script>
</body>
</html>
```
Фоновую картинку с именем construct-bg.jpg нужно положить в ту же папку, в которой находится наш html файл.

Что нужно чтобы заработало локально на компьютере:
1. Создать файл в текстовом редакторе, например, в Notepad++
2. Скопировать приведенный выше код в этот файл и сохранить под именем, например, index-scroll-top.html
3. В папку с этим файлом положить фоновую картинку.
4. Открыть полученный файл в браузере.
Должна открыться страница с нашей картинкой в качестве фона. При прокрутке ее вниз больше, чем на 100px, плавно появляется стрелочка и также плавно исчезает, если страницу прокрутить вверх. При клике по стрелочке, страница плавно прокручивается вверх и стрелочка исчезает. Абзацы с номерами строк я специально добавил, чтобы увеличить размер страницы по высоте – так наглядно видно что прокручивать и удобно следить за появлением/исчезновением стрелки.

Красота!

Что можно улучшить

Самое первое – не подключать полную библиотеку шрифтов FontAwesome, которая занимает, если ее скачать на компьютер 13 мегабайт. Конечно, если она уже подключена на Вашем сайте, ничего делать с ней не нужно, но замедлять загрузку легкого сайта из-за нескольких символьных значков нет никакого желания. К счастью, есть проект Fontello, который позволяет собрать свой собственный шрифт, состоящий только из выбранных символов. Был собран шрифт из 10 символов fontawesome-webfont-custom-10.ttf, который занял всего 7кБ.

Скрипт плавной прокрутки лучше разместить прямо в кнопке чтобы он срабатывал по событию onclick.

Для улучшения совместимости обращение к функциям библиотеки со значка “$“, который не поддерживается в прежних версиях JQuery, лучше заменить на “jQuery“, которое поддерживается всеми версиями. Саму библиотеку же будем загружать локально, что позволит настроить браузерное кеширование для улучшения результатов теста Google PageSpeed Insights. Кстати, стили и дополнительные короткие скрипты я специально не выносил во внешние файлы не только для упрощения кода и улучшения его наглядности, но также следуя рекомендациям Google. Для ускорения загрузки короткие скрипты и небольшие, но постоянно используемые стили поисковик сейчас рекомендует располагать именно в коде страницы, не вынося их во внешние файлы, что уменьшает количество обращений к серверу при загрузке страницы и сокращает ожидание ответов. Из этих же соображений, несколько пожертвовав наглядностью, я немного сжал стили, удалив из них пробелы и лишние отступы. Отступ после каждой фигурной скобки “{ ” остался для совместимости с библиотекой Smarty и вы можете его убрать, если не используете его в своих проектах.

Из эстетических соображений добавим анимацию стрелки при наведении на нее стрелки мыши, а также при нажатии:

.scrollToTop:hover{background-color:#f79008;border-radius:100%;}
.scrollToTop:active{background-color:#f70808;}

Анимацию плавного появления и исчезания кнопки возложим на CSS (“transition: all .5s ease-in-out;”). Ява скриптом же будем просто менять стиль кнопки, который включает/выключает прозрачность кнопки. Что это дает? Улучшается стабильность работы. Кнопка больше не “залипает” во включенном или выключенном состоянии. Уменьшается нагрузка на процессор устройства и повышается экономия энергии т.к. лишних вычислений становится значительно меньше. Правило срабатывания скрипта настроим для появления кнопки, если страница была прокручена более, чем на 1/3 высоты экрана:

if(jQuery(window).scrollTop() > jQuery(window).height()/3){…

Итак, новый улучшенный код страницы выглядит следующим образом:
```
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body{ background-image:url(construct-bg.jpg);background-position:left top;background-size:auto;background-repeat:repeat;background-attachment:scroll;}
.header-top{ position:fixed;display:flex;width:100%;padding:0 50px;max-width:1200px;margin:0 auto;}
.header-top a{ color:black;}
.contact-info{ line-height:25px;float:left;margin:0;}
.contact-info li{ float:left;font-size:12px;color:#384554;margin-right:16px;padding:5px 0;list-style:none;}

/* ScrollToTop button */
.scrollToTop{ opacity:0;width:40px;height:40px;position:fixed;bottom:20px;right:20px;z-index:500;transition:all .5s ease-in-out;text-align:center;cursor:pointer;border:1px solid transparent;border-radius:4px;
background:#555;} /* background - цвет кнопки*/
.scrollToTop span{ margin-top:12px;color:#FFF;}
.showScrollTop{ font-size:14px;opacity:0.5;}
.scrollToTop:hover{background-color:#f79008;border-radius:100%;}
.scrollToTop:active{background-color:#f70808;}

/* FontAwesome */
@font-face { font-family:'FontAwesome';src: url('fontawesome-webfont-custom-10.ttf?v=fontello') format('truetype');font-weight:normal;font-style:normal;}
.fa{ display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.fa-opencart:before{ content:"\f23d";}
.fa-phone:before{ content:"\e800";}
.fa-clock-o:before{ content:"\e801";}
.fa-truck:before{ content:"\e802";}
.fa-credit-card:before{ content:"\e808";}
.fa-chevron-up:before{ content:"\e805";}
.fa-search:before{ content:"\e806";}
.fa-cancel-circled:before { content:"\e810";}
.fa-angle-right:before { content:"\f105";}
.fa-location:before { content:"\e80d";}
</style>
<script type='text/javascript' src='jquery.js?v=2.1.3'></script>  
</head>
<body>
<div class="header-top">
<ul class="contact-info">
<li><i class="fa fa-phone"></i> телефон</li>
<li><i class="fa fa-clock-o"></i> время</li>
<li><i class="fa fa-truck" style="-webkit-transform: scale(-1, 1);"></i> доставка</li>
<li><i class="fa fa-credit-card"></i> оплата</li>
<li><i class="fa fa-search"></i> поиск</li>
<li><i class="fa fa-opencart"></i> корзина</li>
<li><i class="fa fa-cancel-circled"></i> удалить</li>
<li><i class="fa fa-chevron-up"></i> ScrollToTop</li>
<li><i class="fa fa-angle-right"></i> стрелка вправо</li>
<li><i class="fa fa-location"></i> локация</li>
</ul>
</div>
<p>-- 001 --</p>
<p>-- ** --</p>
<p>-- 050 --</p>
<a class="scrollToTop" onclick="jQuery('html,body').animate({scrollTop:0}, 'slow');"><span class="fa fa-chevron-up"></span></a>
<script>
// ScrollToTop button toggle
jQuery(window).scroll(function () {
if(jQuery(window).scrollTop() > jQuery(window).height()/3){
jQuery('.scrollToTop').toggleClass('showScrollTop', true);}
else { jQuery('.scrollToTop').removeClass('showScrollTop');}
});
</script>
</body>
</html>
```
Саму стрелочку сделал нейтральным серым цветом. В любое время можно поменять ее оттенок – он задается в стилях свойством background:#555;/* background – цвет кнопки*/ стиля .scrollToTop. Стрелка появляется после прокрутки страницы более чем на 1/3 высоты экрана.

Вверху странички вывел значки своего 10-ти символьного шрифта, собранного из символов FontAwesome. Этого набора мне показалось достаточно для использования на сайте интернет-магазина. Если вы используете еще какие-то символы, предложите в комментариях к этой статье – и я добавлю их в этот модифицированный шрифт.

“Идеальная стрелочка” не лишена недостатков. Один из которых – в невидимом состоянии она не исчезает полностью, а только становится прозрачной. При клике по ней (если знать куда кликать) даже срабатывает плавный скроллинг. Но на мой взгляд, это не такой уж и большой недостаток. Если вы обнаружите еще какие-либо недочеты или можете предложить свое лучшее решение, предлагаю обсудить это в комментариях.

Полный набор исходников идеальной стрелочки можно скачать по ссылке:
scroll-top-test2.2.zip

One thought on “Делаем идеальную стрелку вверх для сайта (код ScrollUp)”

Влад :

22.08.2019 о 13:38

Супер, конечно. Только кнопка не исчезает до конца.

Відповіcти
1. Админ :
  
  22.08.2019 о 23:55
  
  Кнопка становится невидимой, но можно доработать.
  
  Відповіcти
noname#515 :

13.08.2020 о 14:43

Спасибо большое) Код супер – ничего лишнего!

Відповіcти
Евгений :

21.02.2022 о 15:28

Спасибо огромное за классную кнопку)))

Відповіcти

Лис, 2018

Делаем идеальную стрелку вверх для сайта (код ScrollUp)

Как использовать JQuery

Что можно улучшить

One thought on “Делаем идеальную стрелку вверх для сайта (код ScrollUp)”

Залишити відповідь Скасувати відповідь