webdonsk.ruКак сделать якорный переход по разделам статьи через содержание
Добавил пользователь Владимир З. Обновлено: 15.09.2024
Как делать якорные ссылки?
-
Выбираем заголовок раздела (у нас для примера третьего уровня, но это не важно), к которому будем делать быстрый доступ. Пусть он называется
Заголовок
Заголовок
Переход по якорной ссылке осуществляется мгновенно, что может сбить читателя с толку. Для улучшения навигации и удобства пользователя рекомендуется использовать плавную прокрутку. Добиться этого можно с использованием специального скрипта:
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
var $target = $(this.hash);
var targetOffset = $target.offset().top;
Возможность плавной прокрутки также может быть настроена через плагины или редакторы сторонних разработчиков.
Мы нашли отличную статью, для размещения в блоге. Но статья длинная, и чтобы работать с ней было удобно, хорошо бы добавить к ней навигацию. Эта навигация не должна уводить читателя на другие страницы, а должна работать в пределах страницы со статьёй.
Вот так выглядит адрес, состоящий из одного якоря:
При щелчке по такой ссылке браузер найдёт на странице элемент с соответствующим атрибутом id и прокрутит окно страницы к нему.
При этом перезагрузки страницы не произойдёт.
Интересно, что якорь также можно использовать и в абсолютных адресах, тогда после перехода на нужную страницу по аналогии произойдёт прокрутка к заданной части этой страницы.
Якоря отлично подойдут для создания оглавления для статьи в этом посте.
- index.html Сплит-режим
- style.css Сплит-режим
Решил, что полезно будет.
Зачем нужны заголовки?
Оглавление
Введение
Когда много лет назад придумали HTML, мир был совсем другим. Авторы спецификации вдохновлялись текстовыми документами, где в одном потоке подряд шли абзацы, списки, таблицы, картинки и конечно заголовки. Прямо как в ваших рефератах и курсовых: самый большой заголовок — название, заголовки поменьше — части или главы.
Заголовки и неявные секции
В HTML с тех пор шесть уровней заголовков: от h1 до h6. Они озаглавливают всё, что за ними следует и образуют, так называемые, неявные секции. Такие логические части страницы. Неявные они потому, что закрываются только когда появляется следующий заголовок.
Из-за такой системы неявных секций, спецификация настойчиво рекомендует не использовать элементы h* для подписей под заголовками. Это обычный параграф, а заголовок должен обозначать отдельную часть содержимого. В спецификации есть глава с примерами разметки сложных элементов: подписи, крошки, диалоги — почитайте.
Тег section
Но секции лучше задавать явно с помощью элемента section. Эти два фрагмента идентичны с точки зрения семантики, но этот гораздо понятнее, хоть и многословнее.
Уровни заголовков
Ладно! Раз у нас есть явные секции, то по вложенности легко определить отношение частей. Так может браузеры сами догадаются какого уровня заголовки нужны? А то считать: h1, h2, аш… сбился. Так было бы удобнее менять части кода местами. Такая же идея пришла в голову авторам HTML5 и они описали в спецификации алгоритм аутлайна. Он разрешает использовать на странице только h1, а важность обозначать вложенностью структурных элементов вроде article и section.
Разработчикам идея очень понравилась, многие даже бросились её внедрять. Но вот беда: алгоритм аутлайна до сих не внедрил ни один браузер, читалка или поисковик. На таких страницах все заголовки кричат, что они №1 и самые важные. Но если важно всё, то уже ничего не важно.
Не надо так делать, об этом теперь пишет сама спецификация. За уровнем заголовков нужно следить самим. На самом деле, это не так сложно: на типичной странице вряд ли наберётся структурных частей больше, чем на 3 уровня. Так что не ленитесь.
Не всё так просто
Нет, погоди. Я ставлю класс на div и все сразу видят — это самый большой заголовок, ставлю другой класс — заголовок становится меньше, видно же. Зачем тогда эта ерунда с расчётом уровней, если есть CSS?
Вы конечно правы, стили создают визуальную модель важности: крупный чёрный текст важнее, меленький серенький вообще не важен. Но только если вы смотрите на такую страницу.
Есть две важные группы пользователей, которые читают вашу страницу по тегам разметки. Они не смотрят насколько крупный и чёрный ваш div — чтобы найти на странице самое важное, они ищут h1. Это читалки и роботы. С роботами всё понятно: это поисковики, которым нужно помогать понимать ваши страницы.
Читалками или скринридерами пользуются люди, которые плохо или совсем не видят ваши интерфейсы, или не могут управлять браузером привычным образом. VoiceOver, NVDA, JAWS читают содержимое вслух и ориентируются только по значимым тегам. Элементы div и span не значат ни-че-го, какие бы классы и стили вы не накрутили. Такой сайт — как газета без заголовков, просто месиво текста.
Да какая газета! Очнись, 2017 на дворе, я изоморфное одностраничное приложение делаю, а не стенгазету. У меня тут стейты компонентов — нафига семантика там, где нет текста? Очень хороший вопрос.
Все читалки идут по странице тег за тегом, от первого к последнему. И читают подряд всё, что внутри. Крайне неэффективно: каждая страница начинается с шапки и пока её пройдёшь, забудешь за чем шёл. Поэтому у читалок есть специальные режимы, показывающие только важные части страницы. Структурные элементы header, nav, main и другие, все ссылки, все заголовки.
Если вывести все заголовки и прочитать их, можно составить ментальную, а не визуальную модель страницы. А потом взять и сразу перейти к нужной секции, выбрав её заголовок. Меню, поиск, каталог, настройки, логин — все эти части вашего приложения можно озаглавить, чтобы упростить доступ к ним.
Но бывает, что в дизайне нет заголовков для важных частей. Дизайнер рисует, ему всё ясно: меню с котлетой, поиск с полем и так далее. Но это не должно мешать вам делать доступные интерфейсы. Расставьте нужные заголовки, а потом доступно их спрячьте. Как? Только не display: none, его читалки игнорируют. Есть такой паттерн visually hidden, подробнее в описании к видео.
Думайте не только о том, как выглядит ваша вёрстка, но и о том, насколько логично организована разметка. Не забывайте о заголовках: пусть стили показывают, а заголовки рассказывают о ваших страницах или приложениях.
Давайте разберемся в том, что же такое якорные ссылки в Elementor и Elementor Pro, а по-простому якоря?
Изначально html-страница открывается с самого начала, и все содержимое загружается сверху вниз. Если страница содержит большое количество заголовков, пунктов и подпунктов, то для удобства перехода между ними и придумали якорные ссылки (якоря), по которым Вы очень быстро можете найти интересный абзац или раздел. Очень часто переходы по якорям используются в лендингах, в которых каждый блок соответствует своему пункту меню. Абсолютные и относительные ссылки не очень для этого подходят.
По своей сути, якорь — это своего рода закладка в на странице, к которой можно сделать переход.
Немного кода для понимания:
Помимо удобства в навигации для больших статей, якоря повышают общее ранжирование текста страницы для поисковиков.
Разберемся, как правильно использовать якорные ссылки в Elementor.
Для наглядности придумаем задачу, которую нужно реализовать средствами Elementor.
Дано: 3 секции с длинным текстом.
Задача: сделать переход к каждой секции на странице средствами Elementor.
Для решения данной задачи будем использовать якоря, привязанные к пунктам меню.
1) В первую очередь, создадим якоря перед каждой секцией Elementor на странице редактора (аналогия закладок в книгах). К этим якорям в дальнейшем будет осуществляться переход из меню навигации.
Добавим по виджету перед каждой из секций на нашей странице.
Далее заходим в настройки виджета и вводим ID якоря меню в соответствующее поле.
Для примера, ID для якорей будут такими:
2) Далее создадим меню навигации, по клику на пункт которого будет осуществляться переход к секциям с текстом по якорям. Как сделать меню Elementor мы рассмотрели в данной статье.
Создаем меню в WordPress
3) Теперь нам необходимо добавить пункты меню в созданное меню навигации. Обычно пункты добавляют из списка элементов меню слева, где автоматически появляются все созданные нами страницы, записи и рубрики. По клику на эти пункты у нас открывается новая страница сайта, ссылкой на которую пункт меню и является. Но как быть, если нам нужно осуществить переход от одного блока к другому в пределах одной страницы? Для этого в WordPress есть, так называемые, произвольные ссылки.
5) Создаем 3 произвольные ссылки (про числу секций)
6) Сохраняем меню.
8) Наслаждаемся результатом. Теперь, по клику на пункт меню мы будем переходить к соответствующей секции страницы.
Пример Якорного меню Elementor.
Привязываем якорь к кнопке
Таким простым способ вы добавите переход по якорной ссылке по клику на кнопку.
Вот для примера, кнопка с переходом по якорной ссылке в начало этой статьи.
Переход по якорю к блоку на другой странице.
Давайте добавим такую якорную ссылку.
Создадим вторую страницу и добавим переход по якорной ссылке к последней секции первой страницы, созданной для описания работы якорей в начале данной статьи. Перейдем в редактор Elementor и добавим на новую страницу виджет заголовка, который мы будем использовать как ссылку для перехода на вторую секцию первой страницы, созданной ранее.
Добавим якорную ссылку.
Если мы добавим ссылку на первую страницу, то мы не получим нужного нам результата — по клику нас будет перенаправлять в начало первой странице, а не к ее разделу.
Чтобы перейти к нужному блоку на другой странице, к url-ссылке странице необходимо добавить имя якоря следующего формата:
Перейдите на страницу с примером и кликните по заголовку на ней. Вы перейдете к Секции 2 на другой странице. Если посмотреть в инспекторе кода адрес ссылки, мы увидим следующее:
Пример перехода к якорю на другой странице.
Якорь в тексте.
Создаем якорь в текстовом виджете
Например, нам нужно сделать переход по якорю к 5 абзацу на странице. Добавим якорную ссылку с уникальным именем перед 5 абзацем прямо в текст.
Теперь посмотрим, как ссылка будет выглядеть при просмотре страницы.
Мы увидим, что теги ссылки появились в тексте как есть, а нам нужно, чтобы они встроились на страницу как html-код.
Теперь все теги, которые вы будете прописывать, будут встраиваться в код страницы.
Добавим нашу якорную ссылку в текстовый редактор по-новому:
Вот и все. По клику по кнопке мы перейдем к пятому абзацу по якорной ссылке.
Elementor
В данной статье разберем, как добавить и настроить якорные ссылки с помощью плагина wordpress elementor.
Что такое якорные ссылки?
Якорные ссылки – это ссылки, которые направляют на определенное место на страницы. Позволяют быстро перемещаться с одной секции на другую, минуя листание всего содержания. Используются, как правило на страницах с большим объемом информации или для создания навигации.
Как добавить и настроить якоря в Elementor
На последнем этапе перейдите в редактор elementor, перетащите виджет с меню в шапку или в другую область и укажите название. Поздравляю меню и якорные ссылки настроены.
Видео, как добавить и настроить якорные ссылки в elementor pro
Читайте также: