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

На самом деле юзабилити (удобство сайта для пользователей) очень важно, и мы с вами не один раз об этом говорили.

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

Листая страницу бесконечно вниз, пользователю может потребоваться быстрый подъем наверх, например, для перехода в другой раздел вашего сайта.

Удобнее всего этот момент реализовать с помощью скрипта – плавного подъема наверх страницы.

1. Итак, первым делом в нужные страницы вашего сайта (где вы хотели бы видеть кнопку), перед закрывающим тегом </body> вставьте код:

<div id="go_top">Наверх</div>

<script>

	$(function() {

 		$(window).scroll(function() {

 			if($(this).scrollTop() != 0) {

 				$("#go_top").fadeIn();

 			} else {

	 			$("#go_top").fadeOut();
 
			}
 
		});

		$("#go_top").click(function() {

 			$("html, body").animate({scrollTop: 0}, 800);

 		});

 	});

</script>

«800» здесь – это скорость прокрутки в миллисекундах (можете сменить на свою).

2. Затем в CSS-стили вашего сайта вставьте:

#go_top {
	width: 110px;
	background: rgba(255, 255, 255, .8);
	text-align: center;
	height: 30px;
	line-height: 30px;
	position: fixed;
	bottom: 15px;
	right: 15px;
	color: #111;
	font-family: arial;
	font-size: 15px;
	border: 2px solid #000;
	border-radius: 4px;
	display: none;
	transition: .1s;
}

#go_top:hover {
	background: #fff;
	cursor: pointer;
	transition: .1s;
}

Установка закончена.

Стиль кнопки:

Положение – правый нижний угол.

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

Положение кнопки и ее стиль можете настроить сами. Если же возникают с этим трудности – пишите в комментариях.