Анимированная прокрутка к началу страницы

Опубликовано: 15 Август 2011Автор ratemir

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

ДемоСкачать

Первый шаг. HTML код

Тег <span></span> является промежуточным и добавлен для отображения фоновой стрелки.

Анимированная прокрутка к началу страницы

Второй шаг. Дизайн & CSS

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}
 
#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
 
	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}
 
/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center;
 
	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
 
	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

Нужно отметить, что в идентификаторе #back-top прописывается свойство position:fixed, таким образом элементу на странице присваивается фиксированное положение. Ещё было добавлено такое свойство как transition:1s (1s = 1 секунда), чтобы создать эффект затухания при наведении мыши на стрелку.

Третий шаг.

Ниже приведен код Javascript, Вы можете вставить его в любом месте на странице сайта, но как правило его прописывают между тегами <head></head>. Вначале, он скрывает элемент #back-top (В html это <p id="back-top">). Затем, если прокрутка происходит вниз, то стрелка медленно появляется fadeIn (), в противном случае стрелка исчезает fadeOut (). Следующий набор кода приходит в действие при нажатии курсором мыши на стрелку, что приводит к оживлению прокрутки и плавному переходу к началу страницы.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 
<script>
$(document).ready(function(){
 
	// hide #back-top first
	$("#back-top").hide();
 
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});
 
		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});
 
});
</script>

Заключение.

Обратите внимание на то, что ссылка указывает на якорь #top, который является идентификатором тега <body>. С технической точки зрения Вы можете назначить любой якорь ссылке, и прокручивать страницу в любое место. Даже при выключенном Javascript ссылка всё равно будет работать, но не так элегантно как с jQuery.

Метки: jQuery Рубрика: Технологии jQuery

Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

3 комментариев к “Анимированная прокрутка к началу страницы”

wexon

27 Октябрь, 2011, 13:35

Огромное спасибо, этот плагин, а точнее кусок его помог мне реализовать мою идею
Алексей

19 Март, 2012, 12:35

Здравствуйте. Замечательный скрипт, но у меня не работает на WordPress (сайт seo-armory.ru).
Скрипт вставил в head, стили в стили, P и SPAN — в конец body, но не перед закрывающим тэгом. Ничего не появляется. Не подскажете, в чем может быть проблема?
Алексей

19 Март, 2012, 12:45

Прошу прощения. Повторил вставку кода еще раз, всё заработало. Видимо, моя невнимательность в первый раз.