Генератор случайных чисел   •   Online-инструменты
283 просм
2 комм
Поделиться:

Кнопка «Наверх» с плавной прокруткой страницы для сайта на 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;
}

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

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

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

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

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

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

2
комментария
Мика
16.09 в 10:34
А подключение библиотек не нужно?
  • 0
Мика, Нужно. Для работы скрипта вполне хватил jQuery версии 1.12. Можно подключить от Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Но это при том условии, что на сайте не подключено сторонних библиотек
  • 0
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария