Плавная прокрутка страницы после нажатия на якорную ссылку

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

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

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

<nav id="menu">
	<ul>
		<li><a href="#about">Обо мне</a></li>
		<li><a href="#blog">Мой блог</a></li>
		<li><a href="#services">Услуги</a></li>
		<li><a href="#contacts">Контакты</a></li>
	</ul>
</nav>

Каждая ссылка ссылается на соответствующий блок:

<div id="content">
	<section id="about"></section>
	<section id="blog"></section>
	<section id="services"></section>
	<section id="contacts"></section>
</div>

Рабочий jQuery скрипт плавного перехода к нужному блоку

Итак нам нужно обработать нажатия по ссылкам в нашем меню, отменить стандартное поведение, выяснить на какой блок ссылается якорь и анимировать переход.

Этот скрипт должен быть подключен ниже подключения jQuery библиотеки.

$(document).ready(function()&#123;
	$("#menu").on("click","a", function (event) &#123;
		//отменяем стандартную обработку нажатия по ссылке
		event.preventDefault();

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

		//узнаем высоту от начала страницы до блока на который ссылается якорь
			top = $(id).offset().top;
		
		//анимируем переход на расстояние - top за 1500 мс
		$('body,html').animate(&#123;scrollTop: top&#125;, 1500);
	&#125;);
&#125;);