Собираем якоря в плавающий список

Однажды каждый из нас пробовал делать якорные ссылки внутри статей на своих сайтах. И никто не будет отрицать, что это муторное занятие. Также, многие из нас видели принципы оформления больших статей, например F.A.Q, на каком-нибудь из сайтов в интернете, где список вопросов (ссылок на якоря) размещается вверху, а ответы на эти вопросы, где-то ниже, к которым можно легко переместиться посредством этих ссылок.

Никто не спорит об удобности якорных ссылок, но… Как быть, если ссылок очень много? И как быть, если статья настолько большая, что просто невыносимо постоянно прокручивать страницу то вверх, то вниз? Ну и на последок — а что если вообще настолько лениво, что не хочется вообще делать никаких якорных ссылок?

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

Как это работает?

Итак, скрипт будет работать при помощи библиотеки jQuery, поэтому для начала необходимо подключить её.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Предлагаю сперва разобрать вариант с якорными ссылками. Мы будем собирать список ссылок внутри статьи, т.е. те, которые не имеют атрибут href.

Разместите в статье несколько ссылок подобного рода.

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

<p><a name="target1">Блок 1</a></p>
<p><a name="target2">Блок 2</a></p>
<p><a name="target3">Блок 3</a></p>
<p><a name="target4">Блок 4</a></p>

Теперь добавляем код скрипта

<script>
jQuery(function() {
	jQuery('body').append('<div class="list_anchor"></div>');
	jQuery('a:not([href])').each(function() {
		jQuery('body').children('div.list_anchor').append('<a href="#' + this.name + '">' + this.text + '</a><br />');
	});
});
</script>

В самом начале мы добавляем отдельный блок с классом list_anchor для ссылок в тело body. Если у Вас уже заготовлен для этих нужд отдельный блок, то просто удалите эту строку кода.

Обратите внимание на строку

jQuery('a:not([href])').each(function() {

С помощью функции each мы перебираем все ссылки на текущей странице. a:not([href]) — позволяет перебирать лишь ссылки, не содержащие атрибут href, т.е. берем только якоря. После чего мы добавляем ссылку в ранее созданный блок list_anchor.

Для корректного отображения, давайте также зададим стили для плавающего блока list_anchor.

<style>
div.list_anchor {
	position: fixed;
	top: 25%;
	right: 2px;
	border: 1px solid #000;
	background-color: #dfdfdf;
}
</style>

В принципе это всё, дальнейшее оформление строго за Вами.

А теперь, предлагаю разобрать этот же код, но в случае, когда Вы не хотите делать якоря.

Прежде чем приступить, подготовьте свою статью должным образом. Например, будем собирать ссылки на заголовки подразделов статьи. Заголовки в свою очерь обернуты в div с именем класса title. Как нам известно, ссылка должна вести на уникальный элемент, поэтому каждому заголовку задайте уникальный name или id.

<div class="title" id="block1">Блок 1</div>
<div class="title" id="block2">Блок 2</div>
<div class="title" id="block3">Блок 3</div>
<div class="title" id="block4">Блок 4</div>

После чего добавляем слегка видоизмененный скрипт

<script>
jQuery(function() {
	jQuery('body').append('<div class="list_anchor"></div>');
	jQuery('div.elem').each(function() {
		jQuery('body').children('div.list_anchor').append('<a href="#' + jQuery(this).attr('id') + '">' + jQuery(this).text() + '</a><br />');
	});
});
</script>

Как видите, практически ничего не изменилось, теперь ссылаться будем на id заголовков jQuery(this).attr(‘id’)

В одной из предыдущих статей мы рассматривали плавный переход по якорям на jQuery, что в данном случае было бы тоже не лишним. Таким образом мы собрали все якоря в плавающий список.

Вы также можете скачать пример работы скрипта из вложения в конце статьи.