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

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

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

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

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

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

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

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

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

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

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

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

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

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

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