Плавная прокрутка страницы до нужного блока на jQuery

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

Если такую «прогулку» реализовывать на простых ссылках:

<a href="/#block">Ссылка на блок</div>

где «#block», соответственно, – это id блока, то мы получаем моментальный переход к указанному блоку.

В таких случаях пользователь не сразу поймет, что переход к блоку был выполнен. Поэтому нам нужно как-то снизить скорость прокрутки и добавить некой плавности.

Реализация следующая, на примере одного блока.

Ссылка на таргет блока:

<div class="menu">

	<a href="javascript: void(0);" data-item="block">Название ссылки</a>

</div>

Где «block» – id блока. Стиль для ссылки можете задать любой, присвоив ей нужный class или id.

Сам блок:

<div id="block">Hello, World!</div>

И скрипт для плавной прокрутки (вставлять перед закрывающим тегом </body>):

<script>

	$(".menu a").on("click", function() {

		var get_id = $(this).attr("data-item");
		var target = $("#"+get_id).offset().top;

		$("html, body").animate({scrollTop: target}, 800);

	});

</script>

Где «800» – скорость прокрутки в миллисекундах (можно изменить на свою).