Отправка сообщения






Добро пожаловать!

Плавный скроллинг — JQuery

jquery-yakornye-ssylki-s-plavnym-perexodomЕсли вы имеете представление что такое ссылка, то наверняка знаете, что для навигации по странице удобно использовать якорные ссылки. Якорная ссылка позволяет перемещаться до нужного блока на странице, удобство заключается в возможности использования таких ссылок в документах большого объема. Таким образом, создается якорь – закладка с уникальным именем на странице, после чего в атрибуте тега ссылки href указывается имя якоря, которое начинается символа #.

По умолчанию при клике по такой ссылке в обозревателе, перемещение на нужную закладку происходит мгновенно, без каких либо эффектов. Рассмотрим пример, как можно сделать плавное перемещение от ссылки до закладки.

Первым делом, чтобы пример работал, вам следует подключить JQuery у себя на странице. Далее заготовим наше меню ссылок.

Структура меню ссылок:

<nav id="menu">
	<ul>
		<li><a href="#ex1">Link #1</a></li>
		<li><a href="#ex2">Link #2</a></li>
		<li><a href="#ex3">Link #3</a></li>
		<li><a href="#ex4">Link #4</a></li>
	</ul>
</nav>

Тут стоит отметить, что у тега nav присвоен атрибут id=menu, а так же каждой ссылке с атрибутом href в меню указано имя якоря.

Блоки, на которые ссылаются якорные ссылки:

<div id="content">
	<section id="ex1">
		...
	</section>
	<div class="separator"></div>
	<section id="ex2">
		...
	</section>
	<div class="separator"></div>
	<section id="ex3">
		...
	</section>
	<div class="separator"></div>
	<section id="ex4">
		...
	</section>
</div>

Каждому блоку присвоен уникальный атрибут id, по которому и будет производиться поиск и перемещение к закладке на странице.

Теперь код самого скрипта обработчика:

$(document).ready(function(){
	$("#menu").on("click","a", function (event) {
		// исключаем стандартную реакцию браузера
		event.preventDefault();

		// получем идентификатор блока из атрибута href
		var id  = $(this).attr('href'),

		// находим высоту, на которой расположен блок
			top = $(id).offset().top;
		
		// анимируем переход к блоку, время: 800 мс
		$('body,html').animate({scrollTop: top}, 800);
	});
});

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

Пример работы скрипта, а так же его исходник.

Добавил: htmaker, 20.08.2015 г.
 
плохослабосойдетхорошоотлично (1 голосов, средний: 5,00 из 5)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Форум на разные темы - digital-planet.info

Комментарии

  • Загрузка...

Наверх