Артём Мáлков

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

12 сен2 коммАртём Мáлков

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

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

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

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

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

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

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

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

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

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

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

Рекомендуем к просмотру
Как отследить вертикальное направление прокрутки страницы/элемента на JavaScript/jQuery?
Посты
Как выполнить функцию при скролле страницы или блока на jQuery?
Статьи и советы
Отправка комментариев по Ctrl + Enter для DLE
Модули и скрипты
2
комментария
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 7
    1083
      •  Команда Pandoge
    16 сен в 21:43

    Мика, Нужно. Для работы скрипта вполне хватил jQuery версии 1.12. Можно подключить от Google:

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

    Но это при том условии, что на сайте не подключено сторонних библиотек

    • 1
    766
      •  Гости
    16 сен в 10:34

    А подключение библиотек не нужно?

Подняться наверх
Регистрация на сайте
Pandoge - уникальный проект, который собрал на своих страницах большой опыт многих людей в сфере сайтостроения.Присоединяйся и ты к сообществу, получай неограниченные знания и начинай творить свою мечту!Нажимая кнопку «Регистрация» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Логин
Пароль
Регистрация
Pandoge