Быстрый и надёжный хостинг на SSD-дисках от 165р в месяц   •   Реклама
4 220 просм
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
комментарий
Форма комментирования этой статьи скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 4
    766
      •  Гости
    5 ноя в 03:37

    Раз уж используешь "data-item"то строчку

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

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

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

Подняться наверх
«Pandoge» - помощник вебмастера