Плавная прокрутка вверх, вниз и к прочтению на 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");

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

 

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


Оставьте свой комментарий

Оставить комментарий от имени гостя

0 / 2500 Ограничение символов
Ваш текст должен быть в пределах 10-2500 символов
1 Комментарии | Добавить свои
  • Гость - inverser

    Благодарю! Только пришлось немного переписать код (взяв некоторые строки из другого примера), так как кнопка вниз не работала. И добавил все к тегу body методом append, чтобы не пачкать исходный код ненужным.

    Нравится 0 Короткий URL: