Кнопка «Вверх» с плавной прокруткой страницы на jQuery

•  Печать 
• E-mail

Урок по созданию кнопки "Вверх" с плавной прокруткой страницы на jQuery + исходные коды и пример

На мой взгляд кнопка "Вверх" просто незаменима и я мне трудно представить более-менее хороший сайт без нее. Очень удобно пробежавшись до низа статьи всего в один клик взлететь до самого верха страницы. Скрипт, который я хочу вам показать отличается минималистичным дизайном, который подойдет любому сайту. Кнопка "вверх" имеет плавную прокрутку, которая реализована при помощи jQuery. И, конечно, кнопка будет показывать только если пользователь проскролил страничку вниз.

демо

Оформление кнопочки

HTML

<p id="back-top">
    <a href="#top"><span></span>Вверх</a>
</p>

Итого, мы создали абзац с идентификатором и тег span, в котором будет храниться наша кнопка.

CSS

Займемся кодом CSS-файла.

#back-top {
        /* нижний отступ */
	bottom: 28px; 
  	/* кнопка будет скролиться вместе со страницей */
	position: fixed;
        /* отступ от правго края экрана */
	margin-left: -149px; 
}
#back-top a {
  	/* внешний вид кнопки */
  	-webkit-transition: 1s;
  	display: block;
        -moz-transition: 1s;
	width: 107px;
	text-align: center;
	text-decoration: none;
  	font: 12px/100% Arial;
	color: #bbb;
	transition: 1s;
}
#back-top a:hover {
  	/* при наведении на кнопку */
	color: #000;
}
#back-top span {
  	/* стрелочка */
  	-webkit-transition: 1s;
	width: 107px;
        -moz-transition: 1s;
	height: 107px;
	display: block;
	margin-bottom: 8px;
  	/* путь до иконки, которую вы хотите разместить */
	background: #ddd url(img.jpg) no-repeat center center; 
	transition: 1s;
	/* закругления для углов  */
  	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
 
}
#back-top a:hover span {
	background-color: #778;
}

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

Код для кнопки "Вверх"

jQuery

Данный скрипт скрывает кнопочку, а затем при скролле проверяет прокручена ли страница на 100px или нет. Если страница прокручена, то кнопка "Вверх" появляется, иначе скрывается. По клику на кнопку скрипт красивенько так прокручивает страничку в начало.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 
<script>
$(document).ready(function(){
	// сначала скроем кнопку
	$("#back-top").hide();
 
	// событие скролла
	$(function () {
		$(window).scroll(function () {
			// покажем кнопку если высота до верха экрана больше 100px
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});
 
		// по клику страница перематывается на начало
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 799);
			return false;
		});
	});
 
});
</script>

скачать

Советуем почитать

Правильная php регистрация и авторизация	Как выбрать название сайта	Движок Wordpress и его описание
Как раскрутить сайт самостоятельно?	Минусинск - новый фильтр сайтов от Яндекса	Хитрости ускорения роста SEO трафика сайта