Прокрутка страницы вверх и вниз на jQuery

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

В зависимости от того, какие картинки Вы выберите, блок прокрутки внизу страницы (слева или справа) может выглядеть примерно так:

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

Установка не сложная. Я попытаюсь объяснить доходчиво. Начнём со скачивания учебного материала.

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

1. Скачайте учебный материал и распакуйте архив в отдельную папку на компьютере. В папке top-down находятся все необходимые файлы для успешной работы эффекта. Откройте файл demo.html в своем браузере и убедитесь в том, что всё работает.

2. Блок кнопок прокрутки в зависимости от применения фоновых изображений в настройках файла стилей может выглядеть по-разному. Я подготовил шесть изображений кнопок:

Итак, в папке img находятся три варианта изображений кнопок. Выберите понравившуюся пару, оставьте имена изображений arrow_down.png и arrow_up.png и загрузите их в корневую папку images с изображениями вашего сайта.

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

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

3. Скопируйте и вставьте стили кнопок в свой файл стилей style.css:

/* кнопки вверх, вниз */
.nav_up{
	padding: 7px;
	background-color: white;
	border: 1px solid #00BFFF;
	position: fixed;
	background: transparent url(/images/arrow_up.png) no-repeat top right;
	background-position: 50% 50%;
	width: 20px;
	height: 20px;
	bottom: 20px;
	opacity: 0.7;
	right: 30px;
	white-space: nowrap;
	cursor: pointer;
	-moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-top-right-radius: 3px;
	-webkit-border-top-right-radius: 3px;
    -khtml-border-top-right-radius: 3px;
	-khtml-border-top-right-radius: 3px;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
	padding: 7px;
	background-color: white;
	border: 1px solid #00BFFF;
	position: fixed;
	background:transparent url(/images/arrow_down.png) no-repeat top right;
	background-position: 50% 50%;
	width: 20px;
	height: 20px;
	bottom: 20px;
	opacity: 0.7;
	right: 70px;
	white-space: nowrap;
	cursor: pointer;
	-moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-top-right-radius: 3px;
	-webkit-border-top-right-radius: 3px;
    -khtml-border-top-right-radius: 3px;
	-khtml-border-top-right-radius: 3px;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Проверьте подключение таблицы стилей в разделе header. Там должен быть такой код:

<link rel="stylesheet" type="text/css" href="css/style.css">

4. Файл scroll-startstop.events.jquery.js загрузите в папку (js) со скриптами на вашем сайте. Файлы скриптов корректировать не следует.

5. Чтобы все работало, нужно весь контент разместить внутри блока div с идентификатором и классом content:

<div id="content" class="content">Здесь находится основной контент</div>

6. Внизу страницы или в раздел footer скопируйте и вставьте коды блоков div для размещения кнопок:

<div style="display:none;" class="nav_up" id="nav_up"></div>
<div style="display:none;" class="nav_down" id="nav_down"></div>

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

Код подключения и вызова скрипта, а так же подключения последней версии библиотеки jQuery от Google возьмите из файла demo.html или скопируйте здесь:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script src="js/scroll-startstop.events.jquery.js" type="text/javascript"></script>
		<script>
			$(function() {
				var $elem = $('#content');
				
				$('#nav_up').fadeIn('slow');
				$('#nav_down').fadeIn('slow');  
				
				$(window).bind('scrollstart', function(){
					$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
				});
				$(window).bind('scrollstop', function(){
					$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
				});
				
				$('#nav_down').click(
					function (e) {
						$('html, body').animate({scrollTop: $elem.height()}, 800);
					}
				);
				$('#nav_up').click(
					function (e) {
						$('html, body').animate({scrollTop: '0px'}, 800);
					}
				);
            });
        </script>

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

На этом всё. Спасибо за внимание. Комментируйте статью. С уважением, Л.М.