Вільний час є
ось що знайшов раптом стати в нагоді:
Кнопка вгору - перевірені рішення
1.
Для того, щоб це зробити в будь-якому місці, внизу вашої сторінки, просто додайте наступний код:
Як ви бачите посиланням заданий клас .topbutton використовуючи який, за допомогою CSS, ви можете надати посиланням будь-який, необхідний вам вид, наприклад вид тієї ж кнопки.
Приклад CSS коду:
topbutton <
width. 100px;
border. 2px solid #ccc;
background. # F7f7f7;
text - align. center;
padding. 10px;
position. fixed;
bottom. 50px;
right. 50px;
cursor. pointer;
color. # 333;
font - family. verdana;
font - size. 12px;
border - radius. 5px;
- moz - border - radius. 5px;
- webkit - border - radius. 5px;
- khtml - border - radius. 5px;
>
Прихований текст (ви повинні увійти під своїм ім'ям або зареєструватися і мати 21 повідомлення (ий)):
У вас немає прав щоб бачити прихований текст, що міститься тут.
2 / Кнопка вгору за допомогою jQuery
Кнопка реалізована досить просто. Для її функціонування знадобиться бібліотека jQuery, невеликий скрипт містить події jQuery, певні стилі і тег DIV містить сам текст і необхідний ID.
Кнопка працює в браузерах починаючи з версій Firefox 3.0.10 - 3.6.13, Internet Explorer 7 і 8, Google Chrome, Jquery 1.4.3. На жаль кнопка не працює в IE 6, а воно вам треба :)?
Представлений нижче код вам необхідно вставити переді тегом на всіх сторінках вашого сайту. Якщо бібліотека jQuery вже підключена до вашого сайту, то перший рядок додавати не потрібно.
$ (Window). scroll (function ()
if ($ (this). scrollTop ()! = 0)
$ ( '#toTop'). click (function ()
Щоб надати гарний зовнішній вигляд кнопці необхідно додати наступні стилі. Їх найкраще додати в файл стилів вашого сайту.
#toTop <
width. 100px;
border. 1px solid #ccc;
background. # F7f7f7;
text - align. center;
padding. 5px;
position. fixed;
bottom. 10px; / * Відступ кнопки від нижнього краю сторінки * /
right. 10px;
cursor. pointer;
display. none;
color. # 333;
font - family. verdana;
font - size. 11px;
>
Для виклику кнопки додайте наступний HTML код перед тегом