Описание
Кнопка вверх предназначена для плавного возвращения в начало страницы. Кнопка появляется при прокручивании страницы вниз. При наведении курсора кнопка подсвечивается.
Установка
- Папку button_up из архива залить в корень сайта.
- Между тэгами <head> и </head> Вашего шаблона вставить:
1<script type="text/javascript" src="/button_up/button_up.js"></script> - Между тэгами <body> и </body> вставить:
12345<div id="ups"><a href="/" id="go-to-up"><img src="/button_up/up.png" title="Вверх" alt=""/></a></div> - В файл стилей (обычно style.css) добавить:
- Вариант отображения справа внизу klub-audioknigi.com
123#go-to-up {width: 70px; text-align: center; padding: 0; position: fixed; bottom: 2px; right: 4px; cursor: pointer; color: #666; text-decoration: none;}#ups a img { opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); }#ups a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); } - Вариант отображения кнопки по середине экрана.
1234#ups {display: block; width: 1031px; text-align: right; padding: 0; position: fixed; bottom: 50%;}#toTo_button {padding: 0; cursor: pointer; color: #666; text-decoration: none;}#ups a img { opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); }#ups a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); }
Настройка (не обязательно)
Место появления кнопки относительно начала страницы:
В файле top_button.js ищем $(window).scrollTop()<="500"
Значение 500 меняем на необходимое
< 500 – появляется выше;
> 500 – появляется ниже.
Изменение прозрачности кнопки в состоянии покоя и при наведении курсора:
В файле стилей меняем значение opacity - непрозрачность
| 1 | #ups a img { opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); } |
| 1 | #ups a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); } |
Местоположение кнопки относительно границ страницы:
В файле стилей меняем значение bottom – расстояние снизу, и right –расстояние справа
| 1 | #go-to-up {width: 70px; text-align: center; padding: 0; position: fixed; bottom: 2px; right: 4px; cursor: pointer; color: #666; text-decoration: none;} |
Скрипт был успешно использовался на HTML сайтах, а также на движках WordPress, DLE, Hostcms.
Отзывы
Отзывов пока нет.