Плавный скроллинг — JQuery

Если вы имеете представление что такое ссылка, то наверняка знаете, что для навигации по странице удобно использовать якорные ссылки. Якорная ссылка позволяет перемещаться до нужного блока на странице, удобство заключается в возможности использования таких ссылок в документах большого объема. Таким образом, создается якорь – закладка с уникальным именем на странице, после чего в атрибуте тега ссылки href указывается имя якоря, которое начинается символа #.

По умолчанию при клике по такой ссылке в обозревателе, перемещение на нужную закладку происходит мгновенно, без каких либо эффектов. Рассмотрим пример, как можно сделать плавное перемещение от ссылки до закладки.

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

Структура меню ссылок:

<nav id="menu">
	<ul>
		<li><a href="#ex1">Link #1</a></li>
		<li><a href="#ex2">Link #2</a></li>
		<li><a href="#ex3">Link #3</a></li>
		<li><a href="#ex4">Link #4</a></li>
	</ul>
</nav>

Тут стоит отметить, что у тега nav присвоен атрибут id=menu, а так же каждой ссылке с атрибутом href в меню указано имя якоря.

Блоки, на которые ссылаются якорные ссылки:

<div id="content">
	<section id="ex1">
		...
	</section>
	<div class="separator"></div>
	<section id="ex2">
		...
	</section>
	<div class="separator"></div>
	<section id="ex3">
		...
	</section>
	<div class="separator"></div>
	<section id="ex4">
		...
	</section>
</div>

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

Теперь код самого скрипта обработчика:

$(document).ready(function(){
	$("#menu").on("click","a", function (event) {
		// исключаем стандартную реакцию браузера
		event.preventDefault();

		// получем идентификатор блока из атрибута href
		var id  = $(this).attr('href'),

		// находим высоту, на которой расположен блок
			top = $(id).offset().top;
		
		// анимируем переход к блоку, время: 800 мс
		$('body,html').animate({scrollTop: top}, 800);
	});
});

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

Пример работы скрипта, а так же его исходник.