Узнать разрешение вашего экрана и IP адрес   •   Online-инструменты
1 391 просм
1 комм
Поделиться:

Плавная прокрутка страницы до нужного блока на 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» – скорость прокрутки в миллисекундах (можно изменить на свою).

1
комментарий
Roman
5.11 в 03:37
Раз уж используешь "data-item"то строчку

var get_id = $(this).attr('data-item');

можно заменить на:

var get_id = $(this).data('item');
  • 3
Гостям запрещено учавствовать в обсуждениях сайта. Авторизуйтесь, чтобы иметь возможность оставить свое мнение о материале или задать вопрос.