Кнопка для прокрутки страницы вверх.

12-10-19 root JavaScript 1

В этом уроке мы сделаем кнопку для плавной прокрутки страницы вверх.

Кнопка «Вверх» очень удобна при большом размере страницы.

Html.

Начнем с HTML разметки документа:

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

Код кнопки вставьте в нужное вам место страницы.

Css.

Css код для нашей кнопки:

#back-top {
 position: fixed;
 bottom: 30px;
 margin-left: 866px;
}
#back-top a {
 width: 108px;
 color: black;
 display: block;
 background-color: #ddd;
 text-align: center;
 font: 11px/100% Arial, Helvetica, sans-serif;
 text-decoration: none;
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
 line-height: 30px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}
#back-top a:hover {
 background-color: #777;
}

jQuery.

jQuery будет прятать или показывать кнопку в зависимости от положения ползунка (параметр ScrollTop). При нажатии на кнопку этот параметр обнуляется. Вставьте следующий код в любое место страницы:

<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>

Т.к. тег <body> имеет ID #top (а наша кнопка ссылается на него) кнопка будет работать даже если JavaScript не поддерживается.