Плавная прокрутка вверх, вниз и к прочтению на jQuery

В последнее время стали встречаться сайты, в которых присутствует прокрутка не только в начало или конец страницы, но и к точке, на которой пользователь остановил своё чтение/просмотр в момент нажатия кнопки «в начало»/«в конец». Т.е. пользователю не приходится искать в обилии текста, где он остановил своё чтение. Если у Вас на сайте достаточно большое количества контента, предлагаю попробовать реализовать метод, описанный в данной статье. Плавная прокрутка вверх, вниз и к прочтению облегчит навигацию пользователей на Вашем сайте.

В одной из предыдущих статей мы разобрали, как реализовать плавный переход по якорям на jQuery, в которой мы использовали якоря и ссылки к ним. Т.к. мы хотим реализовать кнопку «возврат к чтению», нам необходимо запоминать текущую позицию на странице, соответственно якорями это сделать будет затруднительно, поэтому предлагаю использовать блоки с id.

Как это работает?

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

<div class="go-top" title="Вверх" id='ToTop'>В начало</div>
<div class="go-content" title="Вверх" id='ToContent'>Возврат к чтению</div>
<div class="go-bottom" title="Вверх" id='ToBottom'>В конец</div>

Обратите внимание на id блоков навигации, с их помощью мы будем определять на какую кнопку нажал пользователь.

Оформление

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

<style>
div.go-top {
	position: fixed;
	bottom: 150px;
	right: 30px;
	display: none;
	cursor: pointer;
}
div.go-content {
	position: fixed;
	bottom: 100px;
	right: 30px;
	cursor: pointer;
}
div.go-bottom {
	position: fixed;
	bottom: 50px;
	right: 30px;
	cursor: pointer;
}
div.go-top:hover, div.go-content:hover, div.go-bottom:hover {
	color: #ff0000;
	font-weight: 700;
}
</style>

В стилях мы задали каждому блоку фиксированную позицию в правом нижнем углу. Обратите внимание, что у кнопки «в начало», имеющей класс .go-top задано свойство display: none;, это необходимо для того, чтобы при новой загрузке страницы кнопка была скрыта, т.к. мы итак будем находиться в начале.

Скрипты

Теперь нам осталось добавить самое главное, скрипт, который будет обрабатывать нажатия на блоки навигации и реагировать на прокрутку страницы.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
	var content_position = jQuery(window).scrollTop();
	
	if (jQuery(window).scrollTop() >= "250") {
		jQuery("#ToTop").fadeIn("slow");
	}
	if ((jQuery(window).scrollTop() + document.body.clientHeight + 250) >= jQuery(window).height()) {
		jQuery("#ToBottom").fadeOut("slow");
	}
	
	jQuery(window).scroll(function(){
		if (jQuery(window).scrollTop() <= "250") {
			jQuery("#ToTop").fadeOut("slow");
		} else {
			jQuery("#ToTop").fadeIn("slow");
		}
		if ((jQuery(window).scrollTop() + document.body.clientHeight + 250) >= jQuery(window).height()) {
			jQuery("#ToBottom").fadeOut("slow");
		} else {
			jQuery("#ToBottom").fadeIn("slow");
		}
	});
	
	jQuery("#ToTop").click(function(){
		content_position = jQuery(window).scrollTop();
		jQuery("html,body").animate({scrollTop:0},"slow");
	});
	jQuery("#ToBottom").click(function(){
		content_position = jQuery(window).scrollTop();
		jQuery("html,body").animate({scrollTop:jQuery(window).height() - document.body.clientHeight},"slow");
	});
	jQuery("#ToContent").click(function(){
		jQuery("html,body").animate({scrollTop:content_position},"slow");
	});
});
</script>

Обратите внимание, в самом начале мы задаем текущее положение окна переменной content_position с помощью функции jQuery(window).scrollTop();. Это необходимо на случай, если пользователь просматривая страницу, обновил ее.

Условие if (jQuery(window).scrollTop() >= «250») обрабатывается при старте страницы, и если область просмотра больше или равна 250, то кнопку «в начало»необходимо отобразить. Если Вам необходимо, чтобы данная кнопка отобразилась раньше или позже, уменьшите или увеличьте данное значение соответственно. Далее идет условие для кнопки «в конец», если нижняя область окна достигла 250 снизу, прячем эту кнопку. Для того, чтобы кнопка вниз исчезла раньше или позже, увеличьте или уменьшите значение соответственно.

Это мы определили стартовые условия, которые будут выполняться при загрузке страницы. Теперь давайте разберем событие прокрутки страницы jQuery(window).scroll(function(){, в данном событии выполняются практически те же самые условия, что и при загрузке страницы, поэтому здесь ничего сложного нет, главное если Вы изменили стартовые значения, не забудьте их изменить и в событии прокрутки страницы.

Последнее, что мы добавили, это обработку клика на блоки навигации. jQuery(«html,body»).animate({scrollTop:0},»slow»); данное действие возвращает область просмотра в самый верх, в позицию 0. jQuery(«html,body»).animate({scrollTop:jQuery(window).height() — document.body.clientHeight},»slow»); возвращает область прокрутки в самый низ, здесь происходит определение высоты всей страницы за вычетом высоты области просмотра, это сделано для того, чтобы прокрутка была не слишком резкой. Также в данных событиях Вы можете изменить скорость прокрутки, заменив значение slow на одно из следующих: slow — медленно, normal — нормально, fast — быстро, либо указать числовое значение (без кавычек), чтобы плавная прокрутка срабатывала именно так, как Вам нужно.

Также обратите внимание, что в обработке клика на блоки «в начало»/«в конец»присутствует строка content_position = jQuery(window).scrollTop();, т.е. при клике на одну из этих кнопок, мы передаем текущую позицию окна в переменную, которую мы задали в самом начале. В результате чего, при нажатии на блок «возврат к чтению» происходит возврат страницы к позиции, которую мы передали в переменную content_position с помощью действия jQuery(«html,body»).animate({scrollTop:content_position},»slow»);

Итог

Вот и всё, плавная прокрутка вверх, вниз и к прочтению на jQuery готова. Вы также можете скачать пример работы скрипта из вложения в конце статьи.

P.S. Если у Вас есть идеи более простого или расширенного способа решения данного вопроса, предлагаю обсудить их в комментариях.