Кнопка "Вгору" для сайту без плагіна

1. Для чого потрібна ця кнопка?
2. Користь для відвідувачів
3. Користь для сайту
4. Проста кнопка наверх для сайту html
5. Плаваюча кнопка наверх для сайту
6. 1. Підключення бібліотеки jQuery
7. 2. Підключення скрипта, що виводить кнопку
8. Картинка для кнопки

Наша взаимовыгодная связь https://banwar.org/

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

У статті будуть наступні частини:

Для чого потрібна ця кнопка?

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

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

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

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

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

Користь для сайту

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

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

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

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

Для реалізації буде досить стандартного функціоналу мови розмітки HTML, доповненого CSS стилями. Кнопка вгору буде діяти як звичайна посилання, що відправляє відвідувача до початку сторінки.

переваги:

• Простота і легкість настройки;
• Чи не потрібна підтримка бібліотек і скриптів.

недоліки:

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

Код кнопки буде складатися з двох елементів. Перший - це HTML посилання, що розміщується в коді сайту. Другий - це CSS стиль кнопки, він розміщується в файлі стилів і відповідає за розташування кнопки і її зовнішній вигляд.

Наступний код розмістіть всередині тіла сайту (всередині тега body, краще, прямо перед його закриттям). Зверніть увагу, що вам буде потрібно картинка, яка послужить кнопкою (замініть ділянку коду на ваш шлях до картинки і її назва).

<a href="#" title="Вернуться наверх" class="buttonup"> <img src = "шлях до картинки / картінка.png"> </a>

Далі вам необхідно прописати стилі створеного нами класу кнопки buttonup. Для цього відкриваємо файл style.css і додаємо в кінець наступного код:

.buttonup {width: 88px; height: 118px; position: fixed; bottom: 20px; right: 50px; }

Цей код відповідає за стан кнопки, редагуючи цифри, ви можете його змінити. Як тільки ви збережете файл, кнопка почне діяти. Параметр width ставте рівним ширині картинки, bottom - відступ від нижнього краю екрану, right - від правого краю екрана.

Плаваюча кнопка наверх для сайту

Отже, друзі, просту кнопку на HTML ми з вами зробили, тепер давайте займемося реалізацією більш просунутою версією. У ній ми позбавимося тих недоліків, які були присутні в попередньому варіанті, а саме:

• Кнопка постійно не маячити перед очима, а з'явиться лише тоді, коли відвідувач перегорне сторінку вниз;
• Ефект повернення наверх сторінки буде плавним, що виглядає стильно;
• Крім того, наша кнопка буде змінюватися при наведенні курсору (міняти колір або яскравість).

Існує маса способів і скриптів, що дозволяють зробити кнопку вгору. Зізнаюся чесно, я не програміст і, якщо в попередньому варіанті з HTML я розібрався, то в JavaScript я повний чайник. Тому я переглянув і вивчив купу різних версій і вибрав для себе варіант, який найпростіше реалізувати (менше змін в різних файлах).

В цілому, процес створення такої кнопки трохи складніше, але розібратися з ним може кожен. Робиться все в 2 етапи:

1. Підключення бібліотеки jQuery

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

Для підключення бібліотеки jQuery, вам потрібно прописати в розділі <head> </ head> вашого сайту наступний рядок:

<Script type = "text / javascript" src = "https://yastatic.net/jquery/2.1.3/jquery.min.js"> </ script>

2. Підключення скрипта, що виводить кнопку

Код скрипта можна вставити двома способами:

• або помістити його цілком між тегами <head> </ head>,
• або розмістивши скрипт в окремому фалі, а в коді сторінки прописати його підключення.

Перший варіант простіше, другий, на мій погляд, зручніше.

Ось сам скрипт (автор Тимур Камаєв wp-kama.ru):

<Script type = "text / javascript"> jQuery (document) .ready (function ($) {$ ( '<style>' + '.scrollTop {display: none; z-index: 9999; position: fixed;' + 'bottom: 20px; left: 90%; width: 88px; height: 125px;' + 'background: url (https://biznessystem.ru/img/arrow.png) 0 0 no-repeat;}' + '. scrollTop: hover {background-position: 0 -133px;} '+' </ style> '). appendTo (' body '); var speed = 550, $ scrollTop = $ (' <a href = "#" class = "scrollTop"> '). appendTo (' body '); $ scrollTop.click (function (e) {e.preventDefault (); $ (' html: not (: animated), body: not (: animated) ') .animate ({scrollTop: 0}, speed);}); // поява function show_scrollTop () {($ (window) .scrollTop ()> 330)? $ scrollTop.fadeIn (700): $ scrollTop.fadeOut (700 );} $ (window) .scroll (function () {show_scrollTop ();}); show_scrollTop ();}); </ Script>

Замініть в скрипті посилання https://biznessystem.ru/img/arrow.png на ту, де буде зберігатися ваша картинка.

Якщо ви будете використовувати для скрипта окремий файл, як це зробив я, то в нього ставите код, що знаходиться між тегами <script> </ script>, самі теги копіювати в файл не потрібно. Файл розміщуєте у себе на хостингу.

Я назвав файл buttonup.js. Для його підключення в заголовку сайту прописуємо ось таку строчку:

<Script type = "text / javascript" src = "https: // шлях до файлу / buttonup.js">

Замість «шлях до файлу» прописуєте адреса, де лежить ваш файл зі скриптом.

Картинка для кнопки

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

Задані цифри наведені для картинки розміром 88 на 250 пікселів (кожна стрілка зроблена по 125 пікселів у висоту). Якщо ви будете використовувати інше зображення, то змінюєте в коді значення width і height на свої.

Значення background-position - це зміщення картинки, його робите трохи більше половини всієї висоти зображення.

Bottom - це відступ від нижнього краю екрану. Left - відступ від лівого краю екрана, тут він заданий в процентах, а можна задати в пікселях, як це було в прикладі з HTML. Там параметр right (відступ справа) було поставлено в пікселях.

Код можна спростити, якщо видалити з нього ось цей рядок:

+ '.ScrollTop: hover {background-position: 0 -133px;}'

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

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

Як бачите, створити гарний сайт самому не складно. На цьому на сьогодні все.