Плавная вертикальная прокрутка страницы сайта на JavaScript

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

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

На самом деле сделать что-либо похожее на своём сайте не составит особого труда. Для этого необходимо выполнить несколько самых простых действий. Начнем с просмотра демонстрационного примера и скачивания исходного материала.

Установка скрипта

1. Распакуйте архив в текущую папку на компьютере. В папке gotop  Вы увидите три папки: img, js и css, а так же файл demo.html. Откройте последний в браузере и проверьте работу скрипта.

2. Файл JavaScript gotop.js, который находится в папке js закачать в одноименную папку в «корень» сайта. В подобной папке, как правило, находятся все Java-скрипты.

3. Подключаем скрипт. Лучше вставить его в раздел footer перед закрывающим тегом body, чтобы не замедлять загрузку страницы. Код подключения скрипта выглядит так:

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

Папка js с файлом gotop.js, как было оговорено, находится в «корне» сайта, поэтому вместо полного пути к файлу перед названием папки js стоит слэш (/).

4. После того, как скрипт подключен вставляем на страницу код кнопки «наверх»:

<a id="gotop" class="scrollTop" href="#" onclick="top.goTop(); return false;"></a>

Код можно вставлять в раздел footer после кода скрипта, в самый низ перед закрывающим тегом body.

5. Осталось прописать стили. Для этого содержимое файла style.css скопируйте и вставьте между тегами <style type="text/css"></style> или внесите в файл стилей вашего сайта. С помощью файла стилей можно изменять как параметры изображения стрелки так и её расположение:

.scrollTop
{ 
background: url(img/arrows2.png) 0 0 no-repeat;
width: 50px;
height: 50px;
position: fixed; 
bottom: 10px; 
right: 10px; 
z-index: 2000; 
	}

          Файл изображения стрелки;

          Параметры стрелки, а именно - ширина и высота. Они должны соответствовать параметрам одиночного изображения стрелки в папке img;

          Позиция (расположение) кнопки: в примере - по 10 пикселов от низа и от правого края.

6. В папке img находятся два вида изображения стрелок:

Выберите понравившееся и загрузите его в папку img с изображениями вашего сайта. С таким же успехом Вы сможете найти любое другое изображение в Сети по поисковому запросу.
Пропишите название файла изображения в style.css в строку:

background:url(img/arrows2.png) 0 0 no-repeat;

После этого всё будет замечательно функционировать.

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