Плавная прокрутка наверх


Здравствуйте уважаемые читатели блога mainview.ru. Сегодня рассмотрим небольшой пример того, как сделать плавную прокрутку наверх страницы. Иногда страница может быть достаточно длинная и прежде чем читатель дойдет до конца, он несколько раз сделает прокрутку экрана. Добравшись до низа страницы, ему снова нужно прокручивать несколько экранов вверх. Вот здесь и пригодиться наш сегодняшний прием. Нажав на одну кнопку, страницы сама плавно перейдет к началу.

Все это очень просто сделать при помощи JQuery (это займёт всего несколько строк кода). Сама кнопка прокрутки наверх не отображается постоянно. Код всегда проверяет, если полоса прокрутки верхней позиции больше определенного значения, то кнопка появляется. Если вы находитесь в верхней части страницы, то кнопку не видно. После нажатия на ссылку, страница плавно прокручивается к самом верху.

Как это выглядит

Вы можете посмотреть демонстрационный пример, чтобы увидеть все это в действии.

демо

Дизайн и CSS

Для нашей будущей кнопки мы должны определить всего один элемент. Назовем его #back-top. Это может быть тег
<p> или <div>, не важно. Главное здесь то, что мы должны задать ему фиксированное положение на странице. Самое лучшее в этом примере привязать его к самому низу страницы. Вот начальный код:

<p id="back-top">
<a href="#top" title="Перейти наверх страницы">наверх</a>
</p>

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

<p id="back-top">
<a href="#top" title="Перейти наверх страницы"><span></span><em>наверх</em></a>
</p>

Далее прописываем CSS правила для заданной структуры

/*
Back to top button 
*/
#back-top {
margin:0;
padding:0;
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
	clear: both;
display:block;

}
#back-top a {
padding: 0;
margin: 0;
height: 40px;
width: 100px;
display: block;
text-decoration: none;
color: #bbb;
	/* background color transition */
	-webkit-transition: background-color .7s;
	 -moz-transition: background-color .7s;
-o-transition: background-color .7s;
transition: background-color .7s;

}
#back-top a:focus {
outline:none;
}
#back-top a:hover {
	color: #000;
}

#back-top a em {
letter-spacing: 1px;
line-height:40px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-right: 5px;
font-style: normal;
}


/* arrow icon (span tag) */
#back-top span {
float:right;
	width: 40px;
	height: 40px;
	display: block;
	margin-bottom: 7px;
	background: #eee url(button.png) no-repeat center center;
	/* rounded corners */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
	/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #ddd;
}

jQuery

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

В начале данный скрипт прячет нашу кнопку (в моем случае это
<p id="back-top">), ведь мы находимся в начальной области страницы, и нам она не нужна.

Затем он проверяет, находится ли окно прокрутки в верхней позиции (scrollTop) и его значение больше 100. Если да, то элемент # back-top начинает плавно появляться, иначе плавно исчезает. Дальше следует функция, которая срабатывает при нажатии мышкой. Если нажатие произошло, то скрипт начнет перемещать страницу до тех пор, пока значение scrollTop не будет равно 0.

<script type="text/javascript">
$(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>
Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

4 комментария

  1. Iron24/09/2011
  2. Gobo05/07/2011
  3. Nch03/05/2011

Добавить коментарий

двенадцать + шестнадцать =