Плавная прокрутка для сайта реализована на 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 будет происходить просто скачок в начало страницы без анимации.

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

 

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

 

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

 

 

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

comments powered by HyperComments
Понравился материал - нажмите, пожалуйста, на кнопку
=)
Алексей
2012-10-30 14:09:16
<p><a href="https://proverstka.com.ua/demo/scroll_to_top/index.html" rel="nofollow">демо пример</a> у вас правильно работает?</p> <p>у вас почему-то не отрабатывает в javascript исчезновение кнопки при загрузке страницы:</p> <pre><code>$(&quot;#back-top&quot;).hide();</code></pre> <p>убедитесь что id название совпадает с id, который вы указали в обработчике <b>scroll</b></p>
Александр
2012-10-30 13:42:39
Привет. У меня почему-то данная кнопка появляется сразу при загрузке страницы... Когда прокручиваешь она на мгновенье исчезает замет опять появляется... Если нажать на нее все работает как надо, и при достижении верха страницы она как и должна пропадает.. Т.е. проблема только в том, что кнопка видима сразу при загрузке страницы, затем работает как и должна.
Дима
2013-01-08 17:52:39
Спасибо за статью! Все получилось быстро и просто!
Алексей
2013-03-23 12:13:03
<p>Картинка задается в css. В данном примере она прописана в строке <code>"background:#ddd url(up-arrow.png) no-repeat center center;</code>" и соответственно должна находится там же где и файл css.</p>
Дмитрий1
2013-03-22 13:57:41
у меня почему то не отображается картинка и сам блок кнопки, только надпись "вверх" есть
Veronika
2013-03-17 02:37:39
It's a pleasure to find somoene who can think so clearly
Денис
2013-06-18 15:14:49
Отлично работает! Срочно нужно было реализовать, 1 минута и готово)) Спасибо)
Саша
2014-03-26 12:59:19
Все отлично поставилось, спасибо (:
NITR@X
2014-03-18 00:08:44
Все отлично работает руки у вас кривые просто.
Игорь
2014-05-01 16:55:50
Не отображается картинка почему то, хотя url прописан правильно.
Тимофей
2013-11-18 09:50:40
Привет! У меня значок стрелки с надписью "Вверх" появляется сразу и не исчезает ни при каких обстоятельствах. Также нет медленного возвращения на верх. Также возвращает в начало именно заглавной страницы, а не той, которую просматриваю. В чем может быть проблема?
Алексей
2013-11-18 11:28:25
<p>Проверьте подключена ли у вас библиотека jQuery. Возможно у вас конфликтует jquery c другой библиотекой ( возможно mooTools). Чтобы правильней ответить, дайте адрес страницы.</p>
Юрий
2013-11-18 17:19:50
Хоть убейся, но картинка стрелочки так и не появилась!
Алексей
2013-11-18 22:18:23
<p>проверьте, что путь к картинке в свойстве background у вас прописан правильно.</p>
AK
2013-12-05 21:55:26
Спасибо, очень помогло!)
Алексей Седляров
2015-04-22 07:54:02
у вас что-то не правильно в javascript коде, возможно не правильный id указан
Алексей Седляров
2015-04-22 07:54:30
у вас что-то не правильно в javascript коде, возможно не правильный id указан
Антон Осьминкин
2014-09-30 17:18:13
Спасибо большое! Здорово помогли ! Да и сайт клевый!
Илья Денисов
2015-04-22 06:04:39
У меня всё получилось, только кнопка не плавно, а резко возвращает на верх страницы. В чём может быть проблема и как можно это исправить?
Алексей
2014-08-23 14:39:58
За местоположение отвечает эта часть кода: #back-top{ position:fixed; bottom:30px; left:50%; //смещение на середину экрана margin-left:200px //смещение от середины еще на 200px } Можете задать нужно вам смещение кнопки. Если надо всегда у правого края держать, то вместо этих 2 строк достаточнно будет вписать свойство right: 100px - число подставляете свое, в px или %
Владимир
2014-07-03 22:16:39
бляди блядство блядище
Сергей Лапин
2014-08-23 03:14:17
Как задать местоположение стрелки? Уменьшаю окно, а она, зараза такая, съезжает за пределы видимости.
Алексей
2014-06-26 08:38:32
Картинка задается в css. В данном примере она прописана в строке "background:#ddd url(up-arrow.png) no-repeat center center;» и соответственно должна находится там же где и файл css.
Владимир
2014-07-03 22:14:31
блядь
Владимир
2014-07-03 22:16:14
бляди
Роман Радченко
2014-06-25 16:25:52
у меня почему то не отображается картинка и сам блок кнопки, только надпись «вверх» есть
Алексей
2014-05-20 15:12:24
еуые
Алексей
2014-05-20 15:26:28
Работу в действии этого примера можно посмотреть тут - http://jsfiddle.net/x404/K5enj/
Кристинка Сафарова
2014-05-27 08:42:14
Здравствуйте, прочитала статью, все понравилось и получилось! У меня еще один вопрос, какой код нужен, чтобы например стрелка или что то другое появлялось ни сразу, а вот например когда мы немного скатимся в низ по страничке?
Алексей
2014-05-27 08:55:07
Здравствуйте! Плавное появление стрелки предусмотрено в коде. В строке if ($(this).scrollTop() &gt; 100){ замените цифру 100 на подходящее вам число - это расстояние в пикселях, которое пройдет страница прежде, чем появится стрелка. Чем больше число, тем дальше надо страницу промотать, чтобы появилась стрелка.
Алексей
2014-05-20 14:56:02
Картинка задается в css. В данном примере она прописана в строке "background:#ddd url(up-arrow.png) no-repeat center center;» и соответственно должна находится там же где и файл css.