Простая кнопка Наверх с функцией возврата – JavaScript

Karina | 09.10.2014

Кнопка «Наверх» очень часто используется на сайтах, где есть много длинных страниц. Когда пользователь, просматривая большую статью, галерею картинок, новости в социальных сетях и т. п., хочет вернуться к началу страницы, он либо долго скроллит (что не очень удобно), либо нажимает клавишу Home на клавиатуре, либо пользуется специальной кнопкой «Наверх».

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

Демо Загрузить архив RAR

Шаг 1. CSS

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

	.inTop {
		position: fixed;
		left: 0px;
		top: 0px;
		width: 20%;
		height: 100%;
		opacity: 0.5;
		filter: alpha(opacity=50);
		cursor: pointer;
		display: none;
		}

	.inTop:hover {
		background-color: #f5f4f4;
		opacity: 1;
		filter: alpha(opacity=100);
		}

	.inTop span {
		display: block;
		width: 100%;
		margin-top: 20px;
		text-align: center;
 		font-size: 110%;
		color: #52466a;
		font-family: Georgia, Times, serif;
		font-weight: bold;
		}

Шаг 2. JavaScript

Следующий шаг – код JavaScript. Для удобства внутри добавлены комментарии с пояснениями:

// объявление переменных:

	var BottomPosition = 0; // положение страницы
	var BottomFlag = false; // флаг для отображения кнопки GO TO BOTTOM
	var AnimateFlag = false;// Флаг для выполнения анимации

		$(document).ready(function() {
			$('.inTop').click(function() {  // клик по кнопке GO TO TOP/GO TO BOTTOM
				AnimateFlag = true; // выполняется анимация
				if(BottomFlag) { // если нажата кнопка GO TO BOTTOM...
					$("body,html").animate({"scrollTop":BottomPosition}, 200, function() { // ...происходит возврат в нужное место страницы со скоростью 200
						AnimateFlag = false; // закончилось выполнение анимации
					});
				BottomFlag = false; // заменяем кнопку
				$('.inTop span').html('GO TO TOP');
				}
				else { // если нажата кнопка GO TO TOP...
					$("body,html").animate({"scrollTop":0}, 200, function() { // ...происходит возврат в начало страницы со скоростью 200
						AnimateFlag = false;
					});
					BottomPosition = $(window).scrollTop();  // запоминаем, до какой позиции была прокручена страница
					BottomFlag = true; // показываем кнопку GO TO BOTTOM
					$('.inTop span').html('GO TO BOTTOM');
				}
			});

			// осуществляем проверку при прокручивании страницы:

			$(window).scroll(function(event) {
				var countScroll = $(window).scrollTop();
				if (countScroll > 200 && !AnimateFlag) { // если пользователь промотал более 200 пикселей...
					$('.inTop').show(); // ...показываем кнопку GO TO TOP
					if(BottomFlag) {
						BottomFlag = false;
						$('.inTop span').html('GO TO TOP');
					}
				}
				else {
					if(!BottomFlag) {
						$('.inTop').hide(); // в других случаях прячем кнопку, если только это не кнопка GO TO BOTTOM
					}
				}
			});
		});

Шаг 3. HTML

Осталось дело за малым – создать кнопку в HTML:

<div class="inTop"><span>GO TO TOP</span></div>

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

Желаем вам творческих успехов и довольных пользователей!