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

•  Печать 

Урок по созданию кнопки "Вверх" с плавной прокруткой страницы на 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>

скачать

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

Нужно ли покупать ссылки?	Платное продвижение сайта ссылками	Как увеличить посещаемость сайта до 1000 человек в сутки
Быстробот Яндекса	Как улучшить поведенческие факторы сайта без накрутки	Золотая подборка сервисов для SEO