Создание навигации по странице, или использование якорных ссылок

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

В этой статье я постараюсь рассказать, как можно автоматизировать процесс создания якорей (anchor) с использованием jQuery. Хотя пример рассмотрим в контексте использования на сайте под управлением WordPress, все же, при желании можно интегрировать эту фишку на любой сайт.

Принцип работы якорных ссылок довольно прост: определяемся с точками, куда необходимо быстро перемещаться. Пусть это будут заголовки с тегом h2. Присваиваем каждому заголовку свой уникальный id. Создаем меню для перехода к пунктам с использованием jQuery. Вместо того, чтобы всю работу проводить вручную, давайте автоматизируем процесс.

Шаг 1: Создаем поле для вывода якорного меню

Так как меню мы зафиксируем по правому краю браузера, вы можете расположить основу блока нашего меню в любом месте. Но лучше в файл single.php:

<div id="left-menu-result">
	<ul class="sllft" style="display: none;"></ul>
</div>

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

Шаг 2: Добавляем скрипт

Это основа нашей разработки. Принцип такой: скрипт обнаруживает все заголовки с тегом h2. По порядку присваиваем заголовкам id. В созданный в первом шаге блок, дублируем текст заголовков в созданные пункты списка. Каждому пункту якорного меню присваиваем href соответственно id заголовка.

Чтобы избежать ошибки, в третей строке указан родительский блок с классом modal-body, из которого нужно брать заголовки. Замените его в скрипте на тот, который у вас в исходом коде.

/* для плавающего меню */
jQuery(document).ready(function($) {
	var menu = $('.modal-body h2');
	if ( menu.length ) {
		$('#left-menu-result ul').html(menu.clone());
		$('#left-menu-result ul h2').replaceWith(function(index, oldHTML){
			return $('<span class="sl_lt">').html(oldHTML);
		});
		$('#left-menu-result span').wrap('<li></li>');
		$('#left-menu-result ul li').append('<a rel="nofollow noindex" class="anchor"></a>');
		// заголовкам и якорям задаем одинаковые id
		var i=0;
		$('.modal-dialog h2').each(function(){
			i++;
			$(this).attr('id', 'b_'+i);
		});
		var a=0;
		$('#left-menu-result ul li a').each(function(){
			a++;
			$(this).attr('href', '#b_'+a);
		});
		// показываем плавающее меню
		$('#left-menu-result ul').show();
		// при наведении на пункт плавающего меню, показываем содержание заголовка
		$('#left-menu-result a').hover(
			function(){$(this).prev('span').show();},
			function(){$(this).prev('span').hide();}
		);
		// прокрутка от пункта плавающего меню к заголовку
		$('a[href^="#"]').click(function(){
			var _href = $(this).attr('href');
			$('html, body').animate({scrollTop: $(_href).offset().top+'px'});
			return false;
		});
	}
});

Для работы этого скрипта на вашем сайте должна быть подключена библиотека jQuery.

В результате, у вас будет создан вот такой html:

<div id="left-menu-result">
	<ul class="sllft" style="">
	<li><span class="sl_lt">Блок 1</span><a rel="nofollow noindex" class="anchor" href="#b_1"></a></li>
	<li><span class="sl_lt">Блок 2</span><a rel="nofollow noindex" class="anchor" href="#b_2"></a></li>
	<li><span class="sl_lt">Блок 3</span><a rel="nofollow noindex" class="anchor" href="#b_3"></a></li>
	<li><span class="sl_lt">Блок 4</span><a rel="nofollow noindex" class="anchor" href="#b_4"></a></li>
	</ul>
</div>

Шаг 3: Оформляем плавающее меню

Теперь красиво оформляем.

#left-menu-result{
	z-index:5;
	position:fixed;
	height:100%;
	top:0;
	right:16px;
	text-align: center;
}
#left-menu-result:after {
	display:inline-block;
	vertical-align:middle;
	width:0;
	height:100%;
	content:'';
}
#left-menu-result ul{
	display:inline-block;
	vertical-align:middle;
	position:relative;
	list-style:none;
	margin: 0; 
	padding: 8px; 
	border: 1px solid #fd3768; 
	border-radius: 20px;
	margin-right: 9px;
}
#left-menu-result li {
	position:relative;
	margin-bottom:10px;
}
#left-menu-result li:last-child{
	margin-bottom: 0;
}
#left-menu-result a {
	display:block;
	width:20px;
	height:20px;
	text-indent:-9999px;
	background:#eeeeee;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px;
	box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
	-webkit-box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
	-moz-box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
}
#left-menu-result a:hover, #left-menu-result .actv_b{
	background:#fd3768;
}
#left-menu-result span{
	font-weight: 600;
	cursor: pointer;
	background:#fd3768;
	position:absolute;
	right:32px;
	top:-13px;
	min-width: 240px;
	max-width: 310px;
	line-height: 16px;
	text-align: left;
	display:none;
	padding:8px 15px 8px;
	color:#fff;
	font-size:14px;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	border-radius:25px;
	-webkit-box-shadow: 0 2px 17px 0 rgba(127,131,160,0.15);
	-moz-box-shadow: 0 2px 17px 0 rgba(127,131,160,0.15);
	box-shadow: 0 2px 17px 0 rgba(127,131,160,0.15);
}

Если вы все правильно сделали, у вас должно появляться плавающее меню. Конечно, приведенный выше код – лишь вариант оформления, который можно переделать под свои условия.