Якорные ссылки на секции
Как задать якорь секции и ссылаться на неё с кнопки, из текста или из меню.
Якорная ссылка ведёт посетителя к нужной секции на странице — сразу прокручивает к секции «Контакты», «Цены» или другому фрагменту. Удобно для кнопок «Подробнее», пунктов меню и ссылок в тексте.
Обзор секций — в Что такое секции. Ссылки в тексте и кнопках подробнее в Создание ссылок в тексте и Блок кнопки.
Задать якорь секции
- Откройте редактор:
ваш-id.photosquare.ru/config. - Выберите страницу в меню Страницы и нажмите Редактировать.
- Наведите курсор на секцию и нажмите Редактировать на панели секции.
- В диалоге настроек найдите блок Якорная ссылка.
- Введите короткое имя якоря — латиницей, цифрами и дефисами, например
o-nasилиkontakty. В поле отображается префикс#. - При необходимости нажмите кнопку копирования справа — в буфер попадёт полный адрес страницы с якорем.
- Сохраните страницу кнопкой Сохранить в редакторе.
[изображение: диалог настроек секции, блок «Якорная ссылка» с полем #o-nas и кнопкой копирования]
Имя якоря преобразуется автоматически: прописные буквы → строчные, пробелы → дефисы, лишние символы убираются. Используйте латиницу — кириллица в якоре не сохранится.
На опубликованной странице у секции появится атрибут id с этим именем — по нему браузер находит цель прокрутки.
Как выглядит ссылка
| Куда ведёт | Пример ссылки |
| Секция на той же странице | #o-nas |
| Секция на другой странице сайта | /kontakty#forma (путь страницы + # + имя якоря) |
| Секция на главной странице | /#uslugi или #uslugi с главной |
Полный адрес с доменом (как при копировании из настроек секции) тоже работает, например ваш-сайт.photosquare.ru/o-nas#komanda.
Ссылка с той же страницы
Кнопка
- Добавьте или откройте блок кнопки.
- В поле ссылки укажите
#имя-якоря— только решётку и имя, без пробелов. - Опцию «Открыть в новой вкладке» для такой ссылки обычно выключают — переход остаётся на той же странице.
Текст
Выделите фрагмент в блоке текста, добавьте ссылку и введите #имя-якоря — см. Создание ссылок в тексте.
[изображение: настройки кнопки, в поле «Ссылка» введено #kontakty]
Ссылка с другой страницы или из меню
В ссылке укажите путь страницы и якорь: /put-kontakty#kontakty. Путь страницы — тот же, что в адресе в браузере (см. Адреса страниц (URL)).
Для пункта навигации создайте страницу-ссылку или отредактируйте ссылку в меню — подробнее в Добавление ссылок в навигацию.
Что видит посетитель
При клике по якорной ссылке страница плавно прокручивается к секции. Учитывается высота фиксированной шапки — начало секции не прячется под меню.
Если открыть адрес с якорем сразу (из закладки или письма), сайт тоже прокрутится к нужной секции после загрузки.
Рекомендации
- Уникальные имена на одной странице — не задавайте один и тот же якорь двум секциям; браузер перейдёт к первой найденной.
- Короткие и понятные имена:
prices,faq,request— проще вставлять в ссылки и меню. - После смены якоря обновите старые ссылки в кнопках, тексте и меню — иначе они будут вести в никуда.
- Якорь можно задать и для секции в подвале сайта — настройки те же через Редактировать при редактировании нижней части сайта.
Частые вопросы
Ссылка не прокручивает к секции
Проверьте: имя в ссылке совпадает с якорем в настройках секции; страница сохранена и опубликована; на странице есть секция с таким якорем. Опечатка в одной букве или лишний дефис ломает переход.
Можно ли якорь на кириллице?
Нет — в поле якоря сохраняются только латинские буквы, цифры и дефисы. Задайте транслит, например o-nas вместо «о-нас».
Нужна ли отдельная страница для каждого якоря?
Нет. Несколько якорей живут на одной длинной странице; в меню можно вести на /uslugi#paket-1 и /uslugi#paket-2 с одной страницы «Услуги».