Якоря и плавный переход по якорным ссылкам

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

Такие якорные ссылки часто используются на страницах F.A.Q.. На таких страницах, много разных пунктов с ответами на частые вопросы. Чтобы в ручную не прокручивать весть текст, в начале располагаются эти вопросы с ссылками на нужный абзац. Так же часто такие якорные ссылки используют в лендингах (посадочных страницах). Я тоже часто использую в лендингах такие якоря, если заказчик просит об этом. Лендинги часто длинные и поэтому такие якоря не плохой помощник.

Пример работы таких ссылок можно посмотреть на этой страничке:

Как сделать переход по якорным ссылкам внутри страницы? Все очень просто. Основная идея в том, чтобы вместо ссылки указать именно имя якоря.

Для начала нужно просто создать ссылку и вместо пути указать якорь и знак решетка перед ним - #

<a href="#yak1">Ссылка на якорь 1</a>

Якорем будет блок с ID - #yak1. Далее просто прописываем нужный элемент с нужным айди.

<div id="yak1"></div>

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

Чтобы реализовать плавное перемещение по якорям, нужно подключать - jQuery. Когда-то я долго искал нужный скрипт и перерыл кучу информации. У большей половины показаны скрипты, которые просто уже не работают на новых версиях библиотек. Возможно, Вы тоже находили эти скрипты, перед тем, как попасть на мой сайт. Тогда мне попался данный скрипт, который был отличным решением, для моих задач.

Для начала в шапку перед закрывающимся head или в подвал перед закрывающимсяbody нужно подключить библиотеку jQuery.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Убедитесь в том, что это уже не сделано ранее, чтобы не спровоцировать конфликт и неработоспособность скриптов.

Теперь после библиотеки, подключаем сам скрипт, который и будет осуществлять анимацию плавного перехода.

<script type="text/javascript">
 $(document).ready(function(){
	$("#menu").on("click","a", function (event) {
		event.preventDefault();
		var id  = $(this).attr('href'),
			top = $(id).offset().top;
		$('body,html').animate({scrollTop: top}, 1500);
	});
});
</script>

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

<nav id="menu">
	<ul>
		<li><a href="#yak1">Ссылка на якорь 1</a></li>
		<li><a href="#yak2">Ссылка на якорь 2</a></li>
		<li><a href="#yak3">Ссылка на якорь 3</a></li>
		<li><a href="#yak4">Ссылка на якорь 4</a></li>
	</ul>
</nav>

В шестой строке указана цифра 1500 - время в миллисекундах и равно 1,5 секундам. Это время за которое совершается переход к нужному якорю. Чтобы ускорить или замедлить анимацию, просто измените число.

По желанию задаете стили в соответствии с внешним видом страницы и наслаждаемся результатом 🙂 Возможно Вы также захотите, чтобы у посетителя была возможность вернуться наверх, в этом Вам поможет статья - кнопка возврата на верх страницы java и jquery.

На этом все, спасибо за внимание. 🙂