Плавающая кнопка Вверх

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

<a href="#" class="back-to-top">Back to Top</a>

Другой вариант - установить ссылку программно через скрипт.

<script type="text/javascript">
	$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
</script>

Добавим стили CSS для кнопки. Подготовьте подходящее изображение, например, стрелку вверх.

a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #27AE61 url("up-arrow.png") no-repeat center 43%;
	border-radius: 30px;
}

Когда страница загружается, то кнопка невидима (display: none). Чтобы её увидеть, нужно прокрутить страницу вниз. С помощью jQuery мы задаём величину в пикселях для прокрутки, чтобы определить момент появления кнопки. Нам поможет функция scroll().

var amountScrolled = 200;

$(window).scroll(function() {
	if ( $(window).scrollTop() > amountScrolled ) {
		$('a.back-to-top').fadeIn('slow');
	} else {
		$('a.back-to-top').fadeOut('slow');
	}
});

Кнопка подготовлена. Добавляем анимацию для прокрутки страницы вверх по щелчку.

$('a.back-to-top').click(function() {
	$('html, body').animate({
		scrollTop: 0
	}, 700);
	return false;
});

Если хотите оставить кнопку статичной, то просто добавьте кнопку-ссылку и оставьте код для анимации. Прятать её не надо.

Не подключайте slim-версию jQuery, так как в ней недоступны эффекты анимации!

Пример на чистом JavaScript.

Реклама