Собираем якоря в плавающий список
Однажды каждый из нас пробовал делать якорные ссылки внутри статей на своих сайтах. И никто не будет отрицать, что это муторное занятие. Также, многие из нас видели принципы оформления больших статей, например F.A.Q, на каком-нибудь из сайтов в интернете, где список вопросов (ссылок на якоря) размещается вверху, а ответы на эти вопросы, где-то ниже, к которым можно легко переместиться посредством этих ссылок.
Никто не спорит об удобности якорных ссылок, но… Как быть, если ссылок очень много? И как быть, если статья настолько большая, что просто невыносимо постоянно прокручивать страницу то вверх, то вниз? Ну и на последок — а что если вообще настолько лениво, что не хочется вообще делать никаких якорных ссылок?
Предлагаю небольшое решение, скрипт для сайта, которые соберет якоря в плавающий список. Почему в плавающий? А чтобы посетители не мучились прокручивать страницу вверх/вниз.
Как это работает?
Итак, скрипт будет работать при помощи библиотеки jQuery, поэтому для начала необходимо подключить её.
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
Предлагаю сперва разобрать вариант с якорными ссылками. Мы будем собирать список ссылок внутри статьи, т.е. те, которые не имеют атрибут href.
Разместите в статье несколько ссылок подобного рода.
Важно: не добавляйте ссылку просто перед текстом, оберните хотя бы часть, чтобы иметь хоть какой-то заголовок для ссылки.
|
1 2 3 4 |
<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> |
Теперь добавляем код скрипта
|
1 2 3 4 5 6 7 8 |
<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. Если у Вас уже заготовлен для этих нужд отдельный блок, то просто удалите эту строку кода.
Обратите внимание на строку
|
1 |
jQuery('a:not([href])').each(function() { |
С помощью функции each мы перебираем все ссылки на текущей странице. a:not([href]) — позволяет перебирать лишь ссылки, не содержащие атрибут href, т.е. берем только якоря. После чего мы добавляем ссылку в ранее созданный блок list_anchor.
Для корректного отображения, давайте также зададим стили для плавающего блока list_anchor.
|
1 2 3 4 5 6 7 8 9 |
<style> div.list_anchor { position: fixed; top: 25%; right: 2px; border: 1px solid #000; background-color: #dfdfdf; } </style> |
В принципе это всё, дальнейшее оформление строго за Вами.
А теперь, предлагаю разобрать этот же код, но в случае, когда Вы не хотите делать якоря.
Прежде чем приступить, подготовьте свою статью должным образом. Например, будем собирать ссылки на заголовки подразделов статьи. Заголовки в свою очерь обернуты в div с именем класса title. Как нам известно, ссылка должна вести на уникальный элемент, поэтому каждому заголовку задайте уникальный name или id.
|
1 2 3 4 |
<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> |
После чего добавляем слегка видоизмененный скрипт
|
1 2 3 4 5 6 7 8 |
<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, что в данном случае было бы тоже не лишним. Таким образом мы собрали все якоря в плавающий список.
Вы также можете скачать пример работы скрипта из вложения в конце статьи.
Комментарии
Здесь еще никто не оставлял комментарии.