ПОШУК

Кнопка "вгору" для сайту: як зробити

Така функція, як кнопка "вгору" для сайту,робить інтернет-ресурс зручнішим для його відвідувачів. Вона допомагає з легкістю переміститися з будь-якої точки сторінки в її верхню частину. Це просто необхідно для інтернет-магазинів і сайтів з великими статтями, які вимагають довгої прокрутки вниз.

Для чого це необхідно

На даний момент на більшості сайтів такоїфункції, як кнопка «вгору», немає, і в цьому немає нічого критичного. Але її використання може принести багато плюсів як для інтернет-ресурсу, так і для його відвідувачів.

Користь для відвідувачів

Часто буває, коли сторінка інтернет-ресурсусильно навантажена обсягом інформації, коли інформаційна стаття займає багато місця і доводиться прокручувати сторінку вниз за допомогою коліщатка миші. В плюс до цього, в кінці статті може бути присутнім безліч коментарів до неї.

Коли відвідувач читає статтю, нічогостомлюючого в прокручуванні вниз Сторінка наразі не має, але коли текст підійшов до кінця і треба переміщатися вгору, то це починає трохи стомлювати. Більшості людей буде просто лінь вести довгу прокрутку, і вони просто закриють сайт, замість того щоб ще прогулятися по його просторах.

Використання кнопки для миттєвого переміщення до верху сторінки робить проведення часу на сайті зручнішим.

Користь для інтернет-ресурсу

кнопка вгору для сайту

Позитивні сторони для самого ресурсу виходятьз минулих факторів, адже спрощене переміщення по сайту покращує поведінкові фактори, так як всі відвідувачі будуть більш активні в своїх діях і перейдуть на інші сторінки.

Тим самим дані поведінкові чинники впливають на ставлення всіх пошукових систем до сайту і призводять до поліпшення місця в пошуковій видачі.

Як зробити кнопку "вгору" на сайті самостійно

кнопка вгору для сайту html

Розбираємося далі. Кнопку прокрутки вгору для сайту на будь-який з CMS завжди можна зробити самостійно, виконавши лише кілька вкрай простих кроків:

  • створення зображення;
  • створення скрипта;
  • створення стилю кнопки;
  • додавання на сайт.

зображення кнопки

Щоб додати кнопку "вгору" на сайті, дляпочатку потрібно зробити саму іконку, при натисканні на яку користувач переміститься вгору сторінки. Для цього можна використовувати готові варіанти, серед яких завжди можна підібрати найбільш підходящий.

Щоб поліпшити вигляд кнопки, необхідно зробити деякі доопрацювання, а саме зробити спрайт, що дозволяє на основі CSS об'єднати фонові картинки, тим самим створивши з них анімацію.

Для графічних робіт можна скористатися будь-яким редактором. Але найзручнішим варіантом буде онлайн-сервіс PIXLR, так як завантажувати тут нічого не потрібно і можна користуватися ним прямо в браузері.

Для початку роботи в вікні редактора потрібно вибрати поле «Завантажити зображення з комп'ютера». Як приклад візьмемо зображення ракети.

як зробити кнопку вгору на сайті

Якщо габарити обраної іконки занадто великі, топотрібно зробити невелику коригування розмірів. Для цього необхідно перейти в верхнє меню і вибрати поле «Редагувати», а після «Free transform ...»

Далі поруч з картинкою з'являються спеціальнімаркери, переміщаючи які, можна змінити розмір зображення. Для збереження пропорцій можна використовувати клавішу Shift, затиснувши яку, потрібно переміщати блакитні маркери. В кінці даних дій виходить зображення ракети.

Наступна дія - створення копії шару.

Тепер необхідно перемістити картинку ракети знового шару трохи вгору. Для цього буде зручно використовувати інструмент переміщення, який розташовується в другій колонці лівого меню, і стрілку «вгору» на клавіатурі.

Тепер потрібно зробити верхню картинку чорно-білої. Це можна зробити за допомогою пункту «Корекція» - «Тон / Насиченість» у верхньому меню. Для повного знебарвлення повзунок «Насиченість» повинен прийняти значення -100. Дана дія дозволить зробити ефект, при якому кнопка «Вгору» буде перетворюватися з чорно-білої в кольорову при наведенні на неї.

Останній штрих - видалення зайвого просторунавколо двох картинок. Для цього вибираємо пункт «Обрізка» з лівого меню і виділяємо в прямокутник лише дві ракети. Для здійснення обрізки натискається клавіша Enter.

Вийшло зображення, в якому немає зайвого вільного простору. Буде потрібно записати значення ширини і висоти картинки, що вийшла, так як ці дані будуть корисні на наступному кроці.

як зробити кнопку вгору на сайті

Для збереження потрібно натиснути на «Файл» -«Зберегти», де в лівому пункті «Мій комп'ютер» записуємо ім'я зображення (тільки англійська розкладка), вибираємо формат (в даному випадку - PNG) і натискаємо кнопку «Так».

Файл зі скриптом кнопки «вгору»

Писати скрипт в даному випадку не потрібно. Можна буде скористатися загальнодоступним варіантом, вносячи в готовий код деякі поправки.

Для цього буде потрібно завантажити будь-редактор коду. Найпопулярніший і до того ж безкоштовний варіант - це Notepad ++. Після його установки потрібно скопіювати і вставити в нього весь цей код:

<Script type = "text / javascript"> $ (document).ready (function () {$ (window) .scroll (function () {if ($ (this) .scrollTop ()> 0) {$ ( "# scroller"). fadeIn ();} else {$ ( "# scroller "). fadeOut ();}}); $ (" # scroller "). click (function () {$ (" body, html "). animate ({scrollTop: 0}, 400); return false;} );}); </ script>

Далі натискаємо в верхньому меню «Файл» - «Зберегтияк ... », після чого зберігаємо код у форматі .js. Після цього можна використовувати даний код на своєму сайті, завантаживши на нього файли скрипта і зображення за допомогою FTP-з'єднання.

Установка на сайт

Для установки кнопки прокрутки вгору для сайту, потрібно розмістити в необхідному місці код. Вписувати його потрібно перед тегом </ Body>.

Створення стилю кнопки в CSS

Найчастіше кнопка "вгору" для сайту розташовується в нижній частині ( «підвалі»).

У файл style.css сайту необхідно внести наступний код:

"/ * Кнопка наверх * /

.scrollTop {
background: url ( "images / up.png") 0 0 no-repeat; / * оносительно шлях до зображення * /
width: 39px; / * ширина кнопки * /
height: 96px; / * 50% висоти кнопки * /
bottom: 5px; / * при фіксованому положенні відступ знизу * /
left: 89%; / * зміщення вліво * /
}
.scrollTop: hover {background-position: 0 -108px; } / * Зміщення фону * / "

В даному випадку і знадобляться ті дані ширини і висоти зображення. Залишилося лише ввести отримані дані в код, і кнопка "вгору" для сайту буде готова! Що ще?

Кнопка "вгору" для сайту на Wordpress

як зробити кнопку вгору на сайті

Для даної CMS кнопку «Вгору» можна зробити за допомогою плагінів, а також самостійно.

Спосіб з плагінами найбільш зручний і простий в установці, так як для цього буде потрібно лише натиснути на кнопку установки і налаштувати весь функціонал в меню плагіна.

До вибору останнього варто підійти зобережністю, так як разом з ним можна буде легко придбати вірус на сайт. Найбільш популярний і перевірений варіант - це плагін під назвою Scroll Back To Top. Завантажити його можна за допомогою стандартного пошуку плагінів Wordpress.

Дане розширення має множиннимфункціоналом, і буде дуже просто індивідуалізувати кнопку "вгору" для сайту на Wordpress. Всі значення змінювати зовсім не обов'язково, буде потрібно налаштувати тільки вид і місце розташування кнопки на сторінці сайту.

Як видно, установка кнопки «вгору» за допомогоюплагінів дуже проста. Але існує один важливий нюанс, який полягає в тому, що кожен встановлений плагін навантажує CMS. Це може позначитися на швидкодії інтернет-ресурсу. Саме тому велика частина власників сайтів намагаються виконувати всі зміни безпосередньо в коді, а не за допомогою сторонніх розширень. Можна зробити кнопку "вгору" для сайту на HTML, що максимально скоротить споживані ресурси.

Перед зміною всіх системних файлів Wordpress необхідно зробити їх резервні копії. Далі можна керуватися усіма кроками по створенню своєї кнопки, описаними вище.

КНОК "вгору" для Joomla

кнопка вгору для сайту joomla 3

CMS Joomla також підтримує установку плагінів, як і Wordpress. Найбільш вдалим варіантом кнопки "вгору" для сайту на Joomla 3 є розширення під назвою Top of the Page.

У даній CMS будь-який плагін може бути встановлений через «Менеджер розширень». Для цього необхідно:

  • завантажити плагін в інтернеті;
  • натиснути на кнопку «Огляд» в менеджері розширень;
  • вибрати скачаний архів;
  • натиснути "Завантажити" і встановити.

Тепер необхідно його активувати в «Менеджері плагінів». Для цього необхідно перейти до цього розділу, знайти плагін і перемкнути його стан на «включено».

Далі йде настройка всіх параметрів розширення за допомогою того ж розділу, де потрібно знайти «Основні параметри» даного плагіна з правого боку.

Top of the Page має наступний функціонал:

  • Run in / administrator - включення опції не тільки на інтернет-ресурсі, але і в самій панелі CMS Joomla.
  • Button Reveal Position - скільки пікселів повинен відмотати користувач для того, щоб кнопка «вгору» з'явилася.
  • Omit Button Text - наявність тексту на кнопці.
  • Always at Top - сторінка сайту весь час буде відображатися з її початку. При використанні «якорів» для прокрутки в певне місце на сторінці дану опцію не потрібно активувати.
  • Smooth Scroll - робить прокрутку сторінки більш плавною.
  • Scroll Duration - час, через яке сторінка повністю переміститься в початок.
  • Scroll Transition - додає прокручуванні великих візуальних ефектів.
  • Transition Easing - «ослаблення» переміщення до верху сторінки.
  • Link Location - місце розташування іконки. За стандартом, кнопка розташовується в правому нижньому кутку.
  • Use Styles - індивідуальний стиль кнопки, який можна задати в полі, розташованому нижче. Якщо переключено на негативне значення, то всі параметри стилів будуть братися з активної теми сайту.
  • Link Style - поле для вписування своїх параметрів стилю кнопки.

Для автоматичної настройки стилю кнопки «вгору» необхідно володіти хоча б мінімальними знаннями CCS. В іншому випадку варто переключити значення передостаннього параметра на «Ні».

Ще один важливий нюанс полягає в тому, щозвичайна напис на іконі містить англомовний текст: Return to Top. На російськомовному сайті подібний текст присутні не може, тому варто просто відключити його в параметрах плагіна або змінити на російську.

Щоб змінити цю написи необхідно зайти насервер сайту за допомогою FTP або вбудованого в хостингу файлового менеджера. Далі в директорії «/ administrator / language / en-GB /» потрібно знайти файл під назвою «en-GB.plg_system_topofthepage.ini».

Перед зміною тексту варто змінити кодування даного документа на utf-8. Це дозволить зробити нормальне відображення російських букв.

Далі знаходимо таку строчку:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Return to Top ""

і змінюємо фразу в лапках на російськомовну. Можна використовувати такі фрази, як «Вгору!», «На початок!» Або «Вгору!».

В кінці потрібно зберегти змінений файл і перевірити наявність кнопки "вгору" для сайту на Joomla.

Кнопка "вгору" для Ucoz

кнопка прокрутки вгору для сайту

Кнопку "вгору" для сайту на Ucoz доведеться робитиза допомогою впровадження коду, так як підключення плагінів для даної CMS неможливо. Однак для цього не буде потрібно довго вивчати файли системи і шукати необхідні рядки, потрібно лише вставити невеликий код в потрібне місце.

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

  • перейти в «Панель управління -> Дизайн -> Управління дизайном (шаблони) -> Нижня частина сайту;
  • вставити скрипт (можна знайти на офіційному сайті проекту і сторонніх ресурсах).

висновок

Після цього в нижньому правому куті з'явиться іконка, що переміщає користувача до самого верху сторінки.

Як було видно, установка кнопки «Вгору» длябудь-який з CMS не була особливо важкою. Можна використовувати як автоматизований спосіб установки (плагіни), так і ручний. Однак останній варіант залишається найбільш гідною кандидатурою, так як не робить негативного впливу на швидкодію сайту.

Можна використовувати кнопку "вгору" для сайту наHTML, щоб максимально скоротити споживання ресурсів сайту, так як велика кількість розширень може зробити негативний вплив на швидкодію ресурсу. Один плагін кнопки "вгору" не зможе сильно вплинути на час завантаження сторінок сайту, але в більшості випадків у користувача присутній як мінімум десяток плагінів, встановлених на CMS. В даному випадку будь-плагін може негативно вплинути на швидкодію сторінок сайту.

  • оцінка: