При помощи такого блока кнопок посетитель вашего сайта сможет легко, быстро и удобно перемещаться вниз и вверх страницы, пользоваться возможностью комфортного чтения текста и применять режим паузы при необходимости. Что касается внешнего вида, блок кнопок на вашем сайте будет выглядеть так:
Демо-пример можно посмотреть здесь, а скачать архив с рабочим материалом здесь.
Установка блока кнопок
1. Скачайте исходники и распакуйте архив в отдельную папку на компьютере. В папке gotop2 Вы найдете готовый материал для установки скрипта на сайт.
2. Откройте папку gotop2. В папке images находятся изображения кнопок. Файлы изображений кнопок закачайте в корневую одноименную папку с картинками вашего сайта. Если Вас не устраивает цвет или размер кнопок, другие можно легко найти по поисковому запросу или изменить имеющиеся в любом графическом редакторе.
3. Далее нужно подключить стили. Пропишите их в файл стилей активной темы style.css или добавьте в настройках темы (Внешний вид → Темы → Настроить → Дополнительные CSS):
/*кнопки вверх, читать, пауза, вниз*/ .arrow { position: fixed; width: 40px; right: 10px; bottom: 45px; z-index: 10; } .arrow img { opacity: 0.3; } .arrow img:hover{ cursor: pointer; opacity: 1; filter: alpha(opacity=100); }
В стилях можно изменить позиционирование блока (right, bottom), степень изменения прозрачности (opacity) и т.д.
4. Файл gotop.js загрузите в папку (js) со скриптами на вашем сайте. Если папки js нет в корневой папке вашего сайта, создайте её самостоятельно. В файле скрипта (в нижней части) проверьте и, при необходимости, подкорректируйте пути к изображениям кнопок.
5. И, наконец, нужно подключить скрипт. Сделать это лучше в разделе footer вашей темы. В таком варианте скрипт будет грузиться немного позже и не замедлять загрузку основного контента страницы.
Код подключения скрипта:
<script type="text/javascript" src="/js/gotop.js"></script>
Обратите внимание на указание правильного пути к папке js. В данном примере она находится в корневой директории сайта.
Вот и всё! После проделанных операций у вас всё должно прекрасно работать.
Настройки
Оперируя настройками в файле gotop.js, можно добиться изменения скорости прокрутки страницы вверх и вниз, а так же изменить скорость скроллинга при чтении.
Чтобы изменить скорость прокрутки страницы вниз и вверх, нужно увеличить/уменьшить (соответственно) числовое значение в строке:
var arrows_my=100;
Для изменения скорости прокрутки в режиме чтения, нужно увеличить/уменьшить (соответственно) интервал задержки в миллисекундах в строке:
stopwatch=setInterval("scroll()",30);
Спасибо за внимание.
Не получатся нормально отобразить кнопки на сайте ucoz они отображаются в том блоке в котором установлен скрипт если в футоре то и отображаются в нём. Как правильно это сделать на сайте ucoz
Сергей, определенно не могу сказать, потому, что с бесплатными хостингами никогда не работал. Но, могу предположить, что такая ситуация возникает, когда не прописаны стили. Расположение кнопок определяется атрибутами:
position: fixed;
width: 40px;
right: 10px;
bottom: 45px;
В данном случае кнопки будут находиться в 45 пикселах от нижней границы экрана монитора и в 10 пикселах от правой. Как-то так!
Спасибо за совет. Моя ошибка была в том что я прописывал стили в css таблицу, я создал отдельный файл стилей загрузил в файловый менеджер и подключил к скрипту через импорт. Теперь всё работает