Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Кнопка плавной прокрутки страницы наверх на jQuery

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

Кнопка плавной прокрутки страницы наверх на jQuery
Содержание статьи

Несколько слов об истории кнопки "Назад"

Прежде всего, хотелось бы немного отвлечься и поговорить об истории всем хорошо известной кнопки "Назад", которая присутствует в верхней панели управления современных браузеров. Надо сказать, что кнопка "Назад" присутствовала в браузерах с самого начала их истории. Как известно, первый браузер в мире появился в 1990 году и автором его был небезызвестный Тим Бернерс-Ли. Спустя 25 лет мы продолжаем пользоваться этой замечательной функцией. Причем, исходя из наблюдений, какую бы суперудобную навигацию не предлагали пользователю современные веб-сайты, будь то "хлебные крошки" или несколько дополнительных навигационных меню, ссылка с текстом "Назад" в конце статьи, все равно многие люди по привычке пользуются функцией, встроенной в браузер и ничего с этим не поделаешь, потому что это привычно, удобно и стандартно.

В дополнение можно сказать, что ту же функцию выполняет клавиша Backspace на клавиатуре, но она расположена под правую руку, которая всегда занята мышкой при серфинге интернета, поэтому пользоваться ей неудобно. Эта кнопка удобна лишь тогда, когда человек печатает и обе его руки лежат на клавиатуре. Еще один способ перейти назад в браузере — воспользоваться очень удобной клавишей на современных мышках. Она расположена под большой палец руки, лежащей на мышке и находится с ее торца. Если драйверы установлены корректно, то во всех браузерах эта кнопка будет выполнять функцию возврата на предыдущую страницу.

Зачем нужна прокрутка страницы вверх?

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

А что же можно сказать про прокрутку страницы вверх и зачем вообще она нужна? Давайте подумаем, полезна ли эта функция или нет.

Давайте представим себе, что мы ввели в Яндексе поисковый запрос — "как сделать кнопку прокрутки страницы вверх". Яндекс предложит нам несколько сайтов, которые, по его мнению, наиболее полно и качественно освещают данный вопрос и дают на него конкретный ответ. Пользователь переходит на один из предложенных сайтов и, разумеется, сразу попадает на статью, в которой описывается, как сделать прокрутку страницы вверх, приводятся примеры с исходным кодом и комментарии разработчиков. Ключевым моментом здесь является то, что пользователь начал посещение сайта не с главной страницы, а с внутренней страницы статьи о методе jQuery scroll, а это значит, что предыдущей страницей был Яндекс, поэтому, дочитав статью до конца, пользователь либо закроет вкладку с этой статьей, либо, если статья ему понравилась, захочет присмотреться к сайту, а вдруг еще что-нибудь интересненькое есть. Тут то как раз и приходит на помощь кнопка прокрутки страницы вверх.

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

Делаем плавную прокрутку страницы при помощи jQuery scroll

А теперь, когда сомнений в пользе этой замечательной функции ни у кого не осталось (мы так надеемся), скорее приступим к главной части — разработке кнопки плавной прокрутки страницы вверх.

Итак, поехали, CSS:

.go-top-trigger {
	width: 40px;
	height: 40px;
	background: #333 url(/i/go-top-trigger.png) 50% 50% no-repeat;
	display: none;
	position: fixed;
	left: 30px;
	bottom: 30px;
	z-index: 4;
	opacity: 0.3;
	cursor: pointer;
	transition: all 0.5s;
}
.go-top-trigger:hover {
	opacity: 1;
	transition: all 0.5s;
}

Тут все предельно просто. Позиция фиксированная, изначально скрыта, белая стрелочка — по этой ссылке, на здоровье!

Двигаемся дальше — HTML:

Ничего проще и быть не может, верно? Вставьте этот код в самый конец контейнера body, например. В принципе даже и не важно, куда его вставить, позиционирование этого слоя все равно абсолютное, а не относительное, но логичней конечно будет вставить в подвал, т.к. сама кнопка именно там и будет появляться.

Ну и, наконец, самое главное — сам скрипт прокрутки страницы вверх с использованием jQuery scroll:

$(function() {
	/*----------------------------------------------------------------------------------------
		go top trigger
	----------------------------------------------------------------------------------------*/
	$(window).scroll(function() {		
		var st = $(window).scrollTop();
		if(st > $(window).height()) {
			$(".go-top-trigger").show(250);
		}
		else {
			$(".go-top-trigger").hide(250);
		}
	});
	
	$(".go-top-trigger").click(function(){
		$("html, body").animate({scrollTop: 0}, 250);
	});
	/*----------------------------------------------------------------------------------------*/
});

Как видно, мы вешаем простую функцию на событие scroll и когда прокрутка вниз достигает определенного значения (не сразу, а высоту экрана браузера, например), мы показываем контроллер прокрутки, в обратном случае — скрываем. Как вы помните, изначально он был специально скрыт.

Смотрим пример плавной прокрутки:

открыть в новой вкладке

Вот и все на этом. Всем спасибо за внимание и успехов!


Предыдущая статья:
Хороший контент — залог успеха

Читайте также:
Как выбрать доменное имя


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»