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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
Пока оценок нет
Комментарии

Здесь еще никто не оставлял комментарии.

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

* - поля обязательные для заполнения. E-mail не публикуется.