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

Доброго часу доби! Зараз розглянемо таку річ, яка стосується юзабіліті вашого сайту – кнопка вгору для сайту. Для тих, хто не знає, що таке юзабіліті сайту коротко поясню – юзабіліті сайту позначає на скільки зручний, логічний і простий інтерфейс сайту для користувача.

Для чого потрібна кнопка наверх

Кнопка вгору в повній мірі відноситься до зручності користування сайтом, тому при її наявності відвідувачеві сайту не доведеться крутити довго коліщатко мишки або тягнути повзунок смуги прокрутки, щоб повернутися вгору сторінки – досить просто натиснути на кнопочку. А якщо в статті знаходиться багато тексту і купа коментарів, то ця процедура може зайняти багато часу і можливо викличе гнівні емоції у користувача. Така ситуація може вплинути на те, що користувач більше не повернеться на ваш сайт. Так що неодмінно ставте кнопку вгору на свій сайт. Ну це були ліричні відступи, тепер приступимо до справи.

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

Кнопка вгору для сайту WordPress, за допомогою плагіна WPFront Scroll Top.

Розповім трохи про плагіні WPFront Scroll Top і що він із себе представляє. Плагін WPFront Scroll Top досить зручний у використанні, в ньому мінімум необхідних налаштувань. Також є можливість вибрати – кнопка повинна бути з картинкою або просто у вигляді тексту. І така важлива річ, як використання власної картинки, що не може не радувати.

Для початку встановлюємо плагін WPFront Scroll Top. Для цього заходимо в адмінку сайту, в меню вибираємо Модулі, в ньому вибираємо Додати новий. На сторінці в рядок для пошуку плагінів вводимо назву плагіна WPFront Scroll Top і встановлюємо його. Після установки не забуваємо його активувати.

Після установки і активації в головному меню адмінки з’явиться пункт WPfront. Наводимо на нього миша і в підменю вибираємо пункт Scroll Top. Перед нами відкрилася сторінка з настройками даного плагіна. В принципі, щоб кнопка вгору для сайту WordPress вже з’явилася на сайті достатньо поставити галочку навпроти увімкнути. Інші налаштування можна залишити за замовчуванням.

У налаштуваннях ви можете вибрати картинку для кнопки, як з представлених в плагіні, так і свою власну, вказавши URL вашої картинки. У наданих плагіном параметрах, кнопка наверх для сайту WordPress досить гнучко настроюється. Ми не будемо детально розглядати настройки, тому що це плагін переведений на російську мову і в ньому все інтуїтивно зрозуміло.

Кнопка вгору на сайт, з використанням скрипта на JQuery

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

На першому кроці ми сформуємо HTML кнопки наверх, далі оформимо його зовнішній вигляд, за допомогою таблиці стилів CSS і за саму дію, яке буде здійснювати кнопка, у нас буде відповідати javascript. Отже, давайте приступимо.

Кнопка наверх для сайту HTML код

Сама кнопка буде представляти із себе звичайне посилання. Вона у нас буде порожня. Ось власне і весь HTML-код:

class “back-to-top”

Цей код потрібно додати перед закривається тегом </ body>. В принципі можна і в інше місце вставити, але, щоб в разі необхідності Ви його могли потім легко відшукати, краще додати перед закривається тегом </ body>.

Для тих, у кого сайт на WordPress заходимо в адміністративну частину сайту, в головному меню наводимо мишкою на пункт Зовнішній вигляд, в який з’явився підміню вибираємо редактор. Вибираємо шаблон з ім’ям Підвал (footer.php), він розтратив весь код, знаходимо закривається тег </ body> і перед ним вставляємо цей код. Після всіх внесених правок не забуваємо натискати кнопку оновити файл. Малюнок додається.

Також можна додати це посилання, за допомогою сценарію Javascript:

<script “text / javascript” jQuery’body’prepend ‘<a href = “#” class = “back-to-top”></ a>'</ script>

Код потрібно додати перед закривається тегом </ body>, Інакше він працювати не буде.

Можна його підключити в окремому файлі javascript або додати в кінець існуючого і тоді взагалі не доведеться лізти в HTML-код.

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

На цьому етапі необхідно сформувати CSS-код. Необхідно в ньому вказати, що кнопка буде займати фіксовану позицію, поставити їй ширину і висоту, а також колір фону і картинку.

Ось як виглядає, власне, CSS-код:

displaywidthheightindent9999pxpositionfixedindexrightbottombackground # 27AE61 url ( “images / up-arrow.png”) no-repeat center 43%; webkitborderradiusborderradiusborderradius

Беремо код і копіюємо в ваш основний файл з таблицями стилів, бажано в кінець.

У WordPress правка файлу з таблицями стилів робиться в редакторі зовнішнього вигляду. Цей процес алогічний того, як ми додавали код html кнопки вгору для сайту. Після всіх правок не забуваємо натискати оновити файл. Малюнок додається.

Давайте тепер пройдемося по налаштуваннях:

Width і height – це ширина і висота кнопки. Тут все зрозуміло, додаткових пояснень, думаю, не потрібно.

Right і bottom – це параметри для того, щоб вказати наскільки пікселів кнопка буде відсунута від правого нижнього краю сайту праворуч і знизу відповідно. За допомогою цих параметрів також можна перемістити кнопку в ліву сторону. На деяких сайтах кнопку роблять і з лівого боку, але мені більше подобається традиційний варіант справа.

Для того щоб перемістити кнопку вгору на ліву сторону сайту потрібно просто поміняти параметр right на left. І тоді пікселі будуть відраховуватися від лівого боку. Нічого складного – все дуже просто!

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

Якщо ви хочете, щоб у кнопки не було фонової заливки, досить просто прибрати перший параметр.

Border-radius округлює кути квадратного елемента. В даному прикладі з зазначеними параметрами у нас вийде кругла кнопка. Якщо поставити border-radius в 0, то кнопка вийде квадратної. Це знадобиться зробити, якщо ви захочете поставити квадратну картинку.

Якщо ви захочете поставити свою картинку для кнопки, то її можна завантажити, наприклад, з сервісу. Але є один нюанс. Коли скачаєте картинку, потрібно буде дізнатися її точні розміри і вказати її ширину і висоту в правилах CSS width і height відповідно. Інакше картинка буде обрізана.

Саму картинку з прикладу я докладу в кінці статті в архівному файлі.

Кнопка наверх jQuery код

Ну ось і нарешті заключний крок, на якому ми сформуємо JQuery зкрипт кнопки вгору:

amountScrolledjQuerywindowscrollfunctionjQuerywindowscrollTopamountScrolledjQuery’a.back-to-top’fadeIn’slow’jQuery’a.back-to-top’fadeOut’slow ‘

Оскільки вище в CSS-коді ми прописали, щоб кнопка була прихована (display: none), то наш jQuery-код буде її показувати, коли потрібно. За те, коли показувати кнопку відповідає параметр amountScrolled. У нашому прикладі вона буде показана, коли відвідувач сайту перегорне сторінку на 300 пікселів вниз. Цей параметр також можна налаштувати під себе.

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

jQuery’a.back-to-top’clickfunctionjQuery’html, body’animatescrollTopreturnfalse

Тут параметр 700 – це час в мілісекундах, за яке сторінка відмотати наверх. Виберіть швидкість, яка Вам подобається.

ось архів скрипт Кнопка вгору. У ньому також знаходиться картинка для кнопки і файл з правилами CSS. Можете скачати його і скопіювати код звідти або просто копіювати його з цієї статті.

Ну от і все. На цей раз вийшла досить змістовна стаття. Сподіваюся вона Вам допомогла вирішити Вашу проблему. З побажаннями і питаннями звертайтеся в коментарях, всім обов’язково відповім. Успіхів!

Ссылка на основную публикацию