Как сделать якорь?

Время выполнения: 5 минут

Аудит вашего сайта или консультация по редактору

0₽

подключенного тарифа для конструктор сайтов

+4

месяца

промокод на продвижение в сетях Яндекс

+12.000₽

тарифа чат-ботов, автоворонок и мобильных приложений

+3

Бесплатный домен в зоне .ru/.рф

0₽

Бесплатный шаблон сайта под вашу сферу бизнеса

0₽

месяца

/год

Забронировать предложение

Получите подарки от mottor при подключении тарифа

спецпредложение

Якорь - это метка на странице сайта, до которой можно осуществить быстрый переход. Якоря применяют для того, чтобы направить посетителя в определённый раздел сайта.

Автоякоря

У блоков Кнопка и Картинка в редакторе сайта уже есть вшитая функция якорной ссылки.

Для начала, добавьте на сайт блок Кнопка, после чего кликните по ней в редакторе сайта. Или добавьте блок Картинка, загрузите в него нужную картинку и затем снова кликните по блоку, чтобы открыть панель редактирования.

Выберите действие

Для того, чтобы кнопка или картинка была именно якорной ссылкой - на панели редактора выберите действие "Прокрутка к секции".

панель редактирования кнопки

панель редактирования картинки

Выберите секцию, к которой будет вести кнопка

Нажмите появившуюся на панели редактора кнопку "Выбрать секцию" и в открывшемся меню выбора кликните по той секции сайта, куда нужно прокрутить страницу при клике на вашу кнопку.

Выбрав секцию, кликните по ней (она выделится зеленым) и нажмите Сохранить.

выбор секции, куда будет вести якорь

Готово! Теперь при клике на добавленную вами таким образом кнопку, посетитель вашего сайта будет попадать на выбранную вами секцию!

Однако, данный способ подходит только для кнопок. Ниже мы описали классический способ создания якорей и создания ссылок на них в редакторе, с помощью HTML кода и простых якорных ссылок.

Создание HTML якоря

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

Добавление кода

Перейдите в редактор сайта добавьте на страницу блок "HTML-код" в том месте, куда будет осуществляться переход.

Откройте код на редактирование

Вставьте следующий код: <a name="xxxx"></a>

Вставьте следующий код:
<a name="xxxx"></a>

где xxxx - это имя якоря английскими буквами. Замените xxxx на свое имя якоря.
Нажмите кнопку "Применить".

Создайте ссылку

Вариант 1
В любом текстовом блоке выделите текст, который надо сделать ссылкой. Нажмите в панели редактирования текста кнопку с цепочкой. Перейдите на вкладку "Якорь".

В поле со знаком # введите имя своего якоря, точно такое же как в прошлом шаге.
Теперь при клике на этот текст на опубликованном сайте страница будет прокручиваться к тому месту, где у вас установлен HTML блок.

Вариант 2
Создайте блок "Кнопка", нажмите на него для начала редактирования.
Выберите действие "Переход по ссылке" и введите в поле ниже текст:
#xxxx
где xxxx - это имя якоря из п.1 (замените xxxx на имя своего якоря!)
После этого клик по кнопке будет переходить на якорь.

Вариант 3
Вставьте блок "Картинка" и нажмите на вставленный блок. Выберите действие "Переход по ссылке" и введите в поле ниже текст:
#xxxx
где xxxx - это имя якоря из п.1 (замените xxxx на имя своего якоря!).
После этого клик по картинке будет переходить на якорь.

Обратите внимание, у ссылок на якори перед именем якоря
должен стоять символ #, в то время как в коде его нет.

Плавный переход к якорю

Перейдите в раздел "Общие" настроек сайта и передвиньте переключатель.

ВНИМАНИЕ! Если настройка "плавные якоря" выключена, то в предпросмотре сайта якоря не будут работать - они будут работать только на опубликованном сайте.

Смотрите также нашу инструкцию Как вставить счетчик обратного отчета