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

Плавная прокрутка для сайта реализована на jQuery. Кнопка прокрутки появляется на странице, когда положение полосы прокрутки браузера достигает установленного в коде нужного значения (код приведен ниже), другими словами – кнопка появится только тогда, когда пользователь прокручивает страницу немного вниз.

Демо можно посмотреть тут или тут http://jsfiddle.net/x404/K5enj/, или промотайте эту страницу ниже.

 

Такая прокрутка реализуется в 3 шага:

1. Написание html-разметки кнопки.

2. Добавление css-стилей.

3. Написание javascript кода, который и отвечает за работу плавной прокрутки страницы вверх при нажатии на кнопку прокрутки.

 

Итак начнем:

1. HTML – разметка

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

Этот код лучше вставить в самом низу страницы, перед закрывающимся тегом </body>. В css для #back-top объявляем свойство position: fixed и позиционируем в правую нижнюю часть страницы. Элемент span нужен только для отображения стрелки, он не обязателен и его можно удалить, если вам не нужна графическая стрелка на кнопке.

 

2. CSS – разметка

#wrapper{
	margin:0 auto;
	width:900px;
	position:relative;
}

/*Стилизация кнопки ВВЕРХ */
#back-top{	
	position:fixed;
	bottom:30px;
	left:50%;
	margin-left:500px
}

#back-top a{
	width:64px;
	display:block;
	text-align:center;
	font:11px/100% Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	text-decoration:none;
	color:#bbb;
	/* background color transition */
	-webkit-transition:1s;
	-moz-transition:1s;
	transition:1s;
}

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

/* графическая стрелка ВВЕРХ */
#back-top span{
	width:64px;
	height:64px;
	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;
	/* background color transition */
	-webkit-transition:1s;
	-moz-transition:1s;
	transition:1s;
}

#back-top a:hover span{background-color:#777}

 

3. Javascript

Первым делом подключаем библиотеку jQuery. Для этого перед закрывающемся тегом head вставляем код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

 

Далее приведен код, который можно вставить в тело страницы или вывести в отдельный javascript файл. Скрипт сравнивает положение scrollTop скроллбара окна со значением 100 (значение указано в пикселях и его можно поменять на другое), если больше 100, то кнопка плавно появляется, иначе затухает.

При клике по ссылке #back-top произойдет анимированная прокрутка body вверх к 0.

$(document).ready(function(){
	// появление/затухание кнопки #back-top
	$(function (){
		// прячем кнопку #back-top
		$("#back-top").hide();
	
		$(window).scroll(function (){
			if ($(this).scrollTop() > 100){
				$("#back-top").fadeIn();
			} else{
				$("#back-top").fadeOut();
			}
		});

		// при клике на ссылку плавно поднимаемся вверх
		$("#back-top a").click(function (){
			$("body,html").animate({
				scrollTop:0
			}, 800);
			return false;
		});
	});
});

Также обратите внимание на случай, если будет выключен javascript в браузере пользователя. Чтобы предусмотреть поведение стрелки и в этой ситуации необходимо к элементу body добавить id="top", а в ссылку к кнопке добавить якорь: <a href="#top">, который является id тега body. Т.е. при выключенном javascript будет происходить просто скачок в начало страницы без анимации.

Архив с исходником можно забрать тут.

 

Если вы столкнулись с какой-то проблемой по установке этого скрипта отпишитесь в комментариях о возникшей проблеме и ответ не заставит себя долго ждать.

 

Кроме этого, за отдельную плату, можете заказать установку этого скрипта на свой сайт. Для этого напишите заявку по любому из адресов, указанных на странице контактов или через форму обратной связи. Скрипт будет установлен аккуратно, без опасности повредить что-нибудь на вашем сайте!

 

 

На сайте добавлена статья "Как сделать плавную прокрутку страницы в любое место страницы"