Артём Мáлков

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

16 сен1 комм

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

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

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

Рекомендуем к просмотру
Как выполнить функцию при скролле страницы или блока на jQuery?
Статьи и советы
Как получить значения CSS-свойств «width» и «height» в процентах на JavaScript?
Статьи и советы
Как подсчитать количество одинаковых элементов на странице в jQuery?
Статьи и советы
1
комментарий
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 5
    766
      •  Гости
    5 ноя в 03:37

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

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

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

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

Подняться наверх
«Pandoge» – опыт, берегущий время