Один з варіантів поліпшення usability сайту - це установки стрілки для пересування між об'єктами верх. Зараз розглянемо як це робиться.
Відразу скажу, даний приклад буде працювати тільки при наявності JQuery. На даний момент він знаходиться фактично на кожному сайті.
По-перше нам потрібен малюнок самої стрілки. Їх зараз премножество. Якщо ввести в пошуку Яндекса запит «стрілка в верх», ми отримаємо велику кількість красивих стрілок. При необхідності можна вказати щоб вона була формату PNG (з прозорим фоном). Знаходимо вподобану, викачуємо. Опрацюємо її в фотошопі (або кому де зручніше) щоб вона була наприклад 60 на 60 пікселів.
Тепер будемо розміщувати стрілку вгору на сайт.
Зробимо це через CSS властивість - background. Мені такий варіант найбільше подобається, тому що з'являється більше способів управління елементом. Але це вже хто як звик.
Додамо в таблицю стилів CSS наступний стиль:
Що ж я тут написав?
Перші 2 властивості (width і height) це розмір нашої картинки. Їх можна змінювати під будь-який розмір.
Далі (background) потрібно вказати шлях до вашої картинки.
Властивість cursor: pointer; - робить курсом миші у вигляді пальця, коли він наведений на об'єкт.
Наступні 4 властивості (position: fixed; bottom: 30px; left: 50%; margin-left: 520px;) тісно пов'язані. Перше фіксує об'єкт на сторінці так, що прокрутка скрол не впливає на його стан. Наступні 3 властивості ставлять його правіше щодо його початкового положення. З цими цифрами можна поекспериментувати як хочете.
І остання властивість ставить блок вище всіх елементів на сайті.
Тепер з самого низу сторінки пишемо:
Подивіться що у нас вийшло. Блок тепер знаходиться де потрібно, але поки що не реагує на натискання. Цим зараз і займемося.
На кожній сторінці сайту, де присутній цей блок ставимо наступний код:
Тепер при натисканні на стрілку сторінка буде прокручуватися в верх. Природно JQuery вже повинен бути підключений.
У коді наведеному вище, є цифра 500. Це час, за яке сторінка повинна досягти верху. Її можна змінювати як вам зручно.
Здавалося б все, але немає. Коли сторінка і так в верху, нам ця стрілка не потрібна. В цьому випадку додамо такий код:
Тепер коли сторінка прокручена менше ніж на 100 пікселів, стрілка в верх ховається. В іншому випадку показується. Дуже зручно.
Відразу зазначу що даний приклад буде функціонувати належним чином в Internet Explorer <9 версии. Связано это с тем, что они не поддерживают свойство position: fixed;. Но в последнее время пошла тенденция отказа от заточек сайтов под старые IE, поэтому я тоже решил не нагружать лишний раз сайт скриптами для IE.
Приклад описаний в цій статті я якраз реалізував на даному сайті. Можете перевірити ;)