«M. Weather» – бесплатный бот-информер погоды «ВКонтакте»
150 просм
0 комм
Поделиться:

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

0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария