Анимированный переход на верх страницы

Дата публикации: 2013-06-21

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

1. Подготовка к уроку

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

Далее нам потребуется библиотека jQuery, думаю Вы знаете где ее взять, но на всякий случай я Вам напомню. Перейдем на сайт //jquery.com, затем переходим по ссылке Download jQuery и сохраняем данную библиотеку, в том месте где у Вас расположены скрипты написанные на языке javascript. У меня это папка js, поэтому в нее и сохраняю данную библиотеку.

Для тех кто не знает jQuery — это специальная библиотека, написанная на языке javascript, которая содержит большой набор различных методов и функций по выборке и манипуляции элементами веб-страницы.
Затем нам потребуется плагин библиотеки jQuery, который позволяет управлять ползунками прокрутки, как горизонтальным так и вертикальным. Название данного плагина jQuery scrollTo.

Плагины — это специальные библиотеки, которые расширяют стандартный функционал библиотеки jQuery.

Поэтому давайте перейдем по ссылке //plugins.jquery.com/scrollto/ затем кликаем по кнопочке Download now и сохраняем данный плагин в папку со скриптами, в нашем случае папка js.

Теперь давайте подключим скачанные библиотеки, для этого открываем файл index.php и добавим следующий код:

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.scrollto.js"></script>

1 2	<script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery.scrollto.js"></script>

Далее давайте создадим пустой файл, в котором будем вести кодирование на языке javascript и точно также подключаем данный файл.

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

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

Теперь приступаем непосредственно к созданию ссылки.

2. Создаем блок ссылки

Первым делом необходимо создать блок который будет выполнять роль ссылки. Для этого на странице, на которой Вам необходимо отображать данную ссылку, добавим следующий код (у меня это главная страница и файл index.php):

<div class="top">Наверх</div>

1	<div class="top">Наверх</div>

Данный код я добавил в самый низ страницы, здесь уже смотрите, сами где Вам удобно его располагать, так как это уже зависит от той страницы, на которой Вы хотите отобразить ссылку. Теперь давайте посмотрим в браузере, что у нас получилось:

Итак, блок отображается, теперь необходимо задать ему несколько правил css. Давайте это и сделаем:

.top {
	position:fixed;
	left:90%;
	opacity:0.6;
	top:90%;
	width:50px;
	height:20px;
	background-color:gray;
	padding:10px;
	cursor:pointer;
	
}

.top {

position:fixed;

left:90%;

opacity:0.6;

top:90%;

width:50px;

height:20px;

background-color:gray;

padding:10px;

cursor:pointer;

}

Опять же, у Вас это будут свои правила, подходящие для Вашего дизайна, но главное, не забывайте указывать правило position и значение fixed. Тем самым Вы зададите фиксированную позицию для блока ссылки. Что бы при перемещении ползунка скрола данный блок всегда оставался в одном положении. Так же я указал позиции слева и сверху (правила left и top), что бы расположить данный блок в правом нижнем углу окна браузера. Давайте теперь посмотрим что у нас получилось:

Теперь блок ссылки занял правильное положение, как я Вам и говорил в правом нижнем углу.

3. Кодируем логику скрипта

Итак, теперь, давайте перейдем в пустой файл, что мы с Вами создали и добавим следующий код:

jQuery(document).ready(function() {
	
	$('.top').hide();
	var win_h = $(window).height();

});

jQuery(document).ready(function() {

$('.top').hide();

var win_h = $(window).height();

});

То есть первым делом необходимо начать работу с библиотекой jQuery. Для этого выбираем элемент document (полностью вся страничка открытая в браузере) и вызываем обработчик события ready(). Данный обработчик сработает после полной загрузки страницы. И когда он сработает выполнится функция описанная внутри него. В теле данной функции мы и будем вести дальнейшее кодирование.

И первым делом, необходимо скрыть блок с ссылкой. Так как мы с Вами условились, что изначально ссылка должна быть скрыта, и появляться только после перемещения ползунка скрола на определенное расстояние вниз. Это расстояние нам нужно задать — это может быть либо постоянное число, либо к примеру какой то универсальный параметр. Я предлагаю использовать, в качестве данного параметра высоту окна браузера. То есть если опустить ползунок скрола на величину соизмеримую с высотой окна браузера, значит верхняя часть сайта уже будет не видна пользователю и можно показать блок с ссылкой на верх.

Поэтому создаем переменную win_h и сохраняем в нее высоту окна браузера. Для этого производим выборку элемента window (окно браузера), используя jQuery, и вызываем метод height(), который вернет высоту выбранного элемента в пикселях.

Теперь когда, ссылка скрыта и у нас есть высота окна браузера, продолжаем кодирование, а именно — реализуем появление блока ссылки при перемещении скролла:

$(window).scroll(function () {
		
		if($(this).scrollTop() > win_h) {
			$('.top').fadeIn(500);
		}
		
		if($(this).scrollTop() <= win_h) {
			$('.top').fadeOut(500);
		}
	});

$(window).scroll(function () {

if($(this).scrollTop() > win_h) {

$('.top').fadeIn(500);

}

if($(this).scrollTop() <= win_h) {

$('.top').fadeOut(500);

}

});

То есть формируем два условия — первое, необходимо для показа ссылки: если величина на которую переместился ползунок скролла, больше чем значение переменной win_h, значит необходимо показать блок с ссылкой. Для этого выбираем данный блок по его классу top, и используем метод fadeIn(), который применяется для показа выбранных скрытых элементов с заданной скоростью (скорость появления элемента), скорость передается первым параметром данному методу (в нашем случае это 500 миллисекунд).

Для того что бы узнать на какое расстояние был перемещен ползунок скролла, необходимо выбрать элемент window (при помощи jQuery) и вызвать метод scrollTop(), который вернет текущее положение ползунка скролла.

И второе аналогичное условие, для исчезания блока с ссылкой — если расстояние на которое перемещен ползунок скролла, меньше или равно значению переменной win_h, значит необходимо скрыть блок ссылки. Для этого выбираем данный блок по классу top и применяем метод fadeOut(), который скрывает выбранные элементы с заданной скоростью (в нашем случае это 500 миллисекунд).

И теперь осталось только реализовать сам механизм перехода к верхней части страницы, для этого давайте добавим следующий код:

$('.top').click(function() {
		$.scrollTo(0,'.header',1000);
	});

$('.top').click(function() {

$.scrollTo(0,'.header',1000);

});

Смотрите, выбираем блок с классом top и описываем обработчик события click(). Данный обработчик сработает, когда по выбранному элементу нажать левой кнопкой мыши, в нашем случае — обработчик сработает, когда кликнуть по блоку с ссылкой. Когда он сработает выполнится функция описанная в нем. И в этой функции мы вызываем метод scrollTo(), данный метод принадлежит плагину jQuery scrollTo и выполняет плавное перемещение с заданной скоростью по осям скрола. Как по вертикальной так и по горизонтальной. Параметры, которые передаются данному методу:

Координаты по оси х — для скролла по горизонтали. То есть в нашем случае координата по данной оси 0, значит если на странице будет отображена горизонтальная полоса прокрутки и ее переместить на любое расстояние, то будет выполнен скрол по горизонтали к координате 0.

Элемент к которому будет выполнен вертикальный скролл. В нашем случае это блок с классом header, то есть шапка нашего сайта. Значит будет выполнен скролл вверх к шапке сайта.

Скорость выполнения перемещения по скроллу. В нашем случае 1000 миллисекунд (1 секунда).

Теперь давайте перейдем в браузер и посмотрим что у нас получилось:

Как Вы видите, все отлично отрабатывает — перемещая ползунок скролла на величину соизмеримую с высотой окна браузера, появляется ссылка Наверх, кликая по ней выполняется плавный скролл на самый верх страницы, со скоростью 1000 миллисекунд. Теперь давайте на всякий случай приведу весь код файла script.js:

jQuery(document).ready(function() {
	
	$('.top').hide();
	var win_h = $(window).height();
	
	
	$(window).scroll(function () {
		
		if($(this).scrollTop() > win_h) {
			$('.top').fadeIn(500);
		}
		
		if($(this).scrollTop() <= win_h) {
			$('.top').fadeOut(500);
		}
	}); 
	
	$('.top').click(function() {
		$.scrollTo(0,'.header',1000);
	});
});