Як зробити кнопку Нагору на сайті
Кнопку Вгору на сайті встановлюють насамперед для зручності відвідувачів.
Зміст:
Для чого потрібна кнопка
Щоб допомогти йому в цьому, на сайті застосовують різні рішення. Або мають меню внизу сторінки за вмістом, або робити кнопку Вгору на сайті.
Якщо на сайті є кнопка Вгору, коли відвідувач дочитає сторінку до кінця, то все, що від нього потрібно, це клікнути по цій кнопці і сторінка плавно прокрутиться до самого верху.
Кнопка Вгору з використанням скрипту
Роблять це зазвичай таким чином, що кнопка Вгору відображається через якийсь час, коли відвідувач починає прокручувати сторінку вниз. Поява та зникнення цієї кнопки відбувається динамічно.
Нехай нам потрібно отримати плаваючий блок у правому нижньому кутку з написом Вгору.
Для цього треба перед закриваючим тегом вставити наступний код скрипту:
Далі необхідно додати нові стилі до таблиці стилів сайту, допустимо так:
border: 3px solid #336699;
Font: 14px Verdana, Arial, Helvetica, sans-serif;
Не забуваємо оновлювати файли, які вносимо зміни. Після таких простих дій та після оновлення сторінки спостерігаємо результат – при прокручуванні вниз з'являється кнопка, при поверненні назад кнопка плавно зникає.
Подивитися можна прямо на цьому сайті. Правда, в даний час кнопка відображається у вигляді іконки.
Прокрутили, скажімо, до самого низу, клацаємо по кнопці і сторінка плавно повертається нагору.
У код можна вносити необхідні зміни на свій смак. Можна відредагувати назву, наприклад, ввести щось своє або розмістити картинку або іконку замість тексту.
Значення в рядку коду if($(this).scrollTop() > 200)визначає пікселі, коли кнопка буде з'являтися і зникати.
Змінюючи параметр $('body, html').animate(, 500) у коді скрипта, отримаємо зміну швидкості прокручування в мілісекундах, так 500 мілісекунд сприймається цілком нормально.
Стилі також можна змінювати відповідно до дизайну сайту. Можна змінити ширину – width: 90px, позиціонування – bottom: 15px, left: 1350px, можна змінити тло кнопки – background: #4E7092, межу кнопки – border: 3px solid #336699, відступи, шрифт і т.д.