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

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Привет, друзья! Путешествуя по просторам Интернета, скорее всего, Вы уже видели блок таких кнопок на некоторых сайтах.
Выглядят они таким образом:

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

Реализация скрипта не составит для Вас особой сложности, если Вы будете внимательно читать и выполнять все пункты, изложенные ниже. Итак, добро пожаловать к установке. Начнём с просмотра демонстрационного примера и скачивания учебного материала.

Процесс установки

1. Скачайте исходники и распакуйте архив в папку на компьютере. В папке gotop2 Вы найдете готовый материал для установки скрипта на сайт.

2. Откройте папку gotop2. В папке img находятся изображения кнопок:

Файлы изображений кнопок закачайте в папку с картинками вашего сайта (она имеет название images или, например, img).

Изображения кнопок так же можно взять непосредственно с моего сайта. Если кто не знает, как это делать, подсказываю: навести мышь на изображение, правой кнопкой мыши открыть контекстное меню и выбрать пункт Сохранить изображение как.

Если Вас не устраивает цвет или размер кнопок, другие можно легко найти по поисковому запросу или изменить имеющиеся в любом графическом редакторе.

3. Пропишите стили кнопок в свой файл стилей style.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) со скриптами на вашем сайте. В файле скрипта (в нижней части) проверьте и, при необходимости, подкорректируйте пути к изображениям кнопок.

5. И, наконец, нужно подключить скрипт. Сделать это можно в разделе head, но лучше будет, если Вы разместите код подключения в footer. В таком варианте скрипт будет грузиться немного позже и не замедлять загрузку основного контента страницы.

Код подключения скрипта:

<script  type="text/javascript" src="/js/gotop.js"></script>

Обратите внимание на указание правильного пути к папке js. В данном случае она находится в корневой директории сайта.

Вот и всё! После проделанных операций у вас всё должно прекрасно работать.

Немного настроек

Оперируя настройками в файле gotop.js, можно добиться изменения скорости прокрутки страницы вверх и вниз, а так же изменить скорость скроллинга при чтении.

Чтобы изменить скорость прокрутки страницы вниз и вверх, нужно увеличить/уменьшить (соответственно) числовое значение в строке:

var arrows_my=100;

Для изменения скорости прокрутки в режиме чтения, нужно увеличить/уменьшить (соответственно) интервал задержки в миллисекундах в строке:

stopwatch=setInterval("scroll()",30);

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