Кнопки на JavaScript для быстрой прокрутки страницы, чтения и паузы

[Всего голосов: 3    Средний: 5/5]


При помощи такого блока кнопок посетитель вашего сайта сможет легко, быстро и удобно перемещаться вниз и вверх страницы, пользоваться возможностью комфортного чтения текста и применять режим паузы при необходимости. Что касается внешнего вида, блок кнопок на вашем сайте будет выглядеть так:

Блок кнопок

Демо-пример можно посмотреть здесь, а скачать архив с рабочим материалом здесь.

Установка блока кнопок

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);
Для нахождения участка кода в html, css, js документе можно использовать режим поиска текстового редактора. Например, в Notepad++ в верхнем меню откройте ПоискНайти. Скопируйте искомый код, введите в строку Найти и нажмите кнопку Искать далее.

Спасибо за внимание. Всего Вам доброго. До следующей встречи!
Комментируйте статью. С уважением, Л.М.

 

Поделиться в соц. сетях

Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Яндекс

Комментарии 3

  • Не получатся нормально отобразить кнопки на сайте ucoz они отображаются в том блоке в котором установлен скрипт если в футоре то и отображаются в нём. Как правильно это сделать на сайте ucoz

    • Сергей, определенно не могу сказать, потому, что с бесплатными хостингами никогда не работал. Но, могу предположить, что такая ситуация возникает, когда не прописаны стили. Расположение кнопок определяется атрибутами:
      position: fixed;
      width: 40px;
      right: 10px;
      bottom: 45px;

      В данном случае кнопки будут находиться в 45 пикселах от нижней границы экрана монитора и в 10 пикселах от правой. Как-то так!

  • Спасибо за совет. Моя ошибка была в том что я прописывал стили в css таблицу, я создал отдельный файл стилей загрузил в файловый менеджер и подключил к скрипту через импорт. Теперь всё работает

Добавить комментарий

Ваш e-mail не будет опубликован.