Реализация довольно проста. При клике по ссылке в навигации блокируем стандартное действие браузера, берем атрибут href, ищем блок с этим ID и вычисляем высоту от начала страницы. Добавляем плавную анимацию. Ниже пример HTML и jQuery кода.

Плавный скроллинг к блоку на jQuery

HTML:

<body>
	<!-- Навигация сайта -->
	<nav id="menu">
		<ul>
			<li><a href="#block1">Link #1</a></li>
			<li><a href="#block2">Link #2</a></li>
			<li><a href="#block3">Link #3</a></li>
		</ul>
	</nav>

	<!-- Блоки с контентом -->
	<section id="block1">
	</section>
	<section id="block2">
	</section>
	<section id="block3">
	</section>
</body>

jQuery:

$(function() {
	$("#menu").on("click","a", function (event) {
		// отмена стандартного действия браузера при нажатии на ссылку
		event.preventDefault();

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

		// вычисление высоты от начала страницы до блока
		top = $(block).offset().top;

		// анимация перехода на расстояние top за 1500 мс
		$('body,html').animate({scrollTop: top}, 1500);
	});
});