Робимо стрілку вгору для сайту 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

Кві, 2018

Робимо стрілку вгору для сайту ScrollUp

Як використовувати JQuery

Що можна покращити

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