С чем вам помочь?

Задавайте вопрос или опишите проблему, с которой Вы столкнулись

Установка якоря на странице

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

 

Как это сделать, мы постараемся сейчас разъяснить.

 

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

 

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

Обратите внимание, добавлять якорь нужно в HTML виде в режиме Источник. Подробнее про режим источник тут - http://www.advantshop.net/help/pages/html-editor

Для создания якоря следует сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. 

Например, вот так:

<a name="one"></a>

Где one - это название якоря, а атрибут href можно не указывать вовсе. Этот код ссылки нужно вставить туда, куда нам нужно перейти. К примеру, в начале каждой главы или абзаца с нужной информацией. При нажатии на ссылку которую мы добавим позже, пользователя будет перебрасывать именно в ту часть текста где расположен код якоря.

Якорей на странице может быть несколько. Имена для якорей должны быть уникальными (разными).

Важно: данные теги нужно помещать непосредственно перед заголовком пункта, к которому переходим. Помещать текст в теги <a></a> не нужно, так как в таком случае текст будет отображаться как ссылка.

 

Добавление ссылки на якорь

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

Сразу отметим, что для ссылки внутри одной страницы и ссылки на разных страницах с якорями формируются по разному. 

1) Для ссылок на якори внутри одной страницы

Для этого нам понадобиться в оглавление, или подходящий для этого раздел документа, добавить обычную ссылку вида:

<a href="page1.html#one" target="_self">Ваш текст</a>

Это код обычной ссылки, за исключением того что для атрибута href указывается адрес страницы, знак решетки "#" и название якоря к которому нужно перейти.

Можно использовать как сокращённый вариант - всё что после домена и слеша ( / ), так и полный путь до страницы вместе с доменом.

Например, если страница на которой мы разместили якоря находится тут: http://www.moysite.ru/page1.html, то подойдут варианты:

<a href="page1.html#one" target="_self">Ваш текст</a>
и
<a href="http://www.moysite.ru/page1.html#one" target="_self">Ваш текст</a>

 

2) Для ссылок на якори на разных страницах.

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

Например:

<a href="www.moysite.ru/page2.html#one">Ваш текст</a>

Эта ссылка "www.moysite.ru/page2.html#one" означает, перейти на адрес www.moysite.ru/page2.html к якорю #one

Т.е. при нажатии на ссылку произойдет переход по ссылки и последует "переброс" по документу к нужному якорю.

Всё просто. Пробуйте.

 

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Как мы можем улучшить статью?
Благодарим за отзыв.
Благодарим за отзыв. Мы улучшим эту статью.
Произошла ошибка.
Не нашли нужную статью? Предложить тему
Не нашли нужную статью?
Благодарим за отзыв.
Произошла ошибка.

Дизайн интернет-магазина

Работа с CSS Как изменить надписи кнопок на сайте Как изменить дизайн сайта Как изменить размер и стиль шрифта на сайте Примеры изменения CSS Как создать и загрузить свою цветовую схему в трансформер дизайна Настройка внешнего вида интернет-магазина Как загрузить свою тему в трансформер дизайна Редактирование блоков и текстов на главной странице Как создать и загрузить свой фон в трансформер дизайна Работа со статическими блоками (видео) Работа со статическими блоками (описание блоков) Вопросы авторского права на дизайн Товары на главной: добавление новинок и хитов Настройка карусели на главной странице интернет-магазина (видео) Настройка карусели на главной странице интернет-магазина Вывод изображения большего размера при нажатии изображение Вывод вплывающего окна с текстом при нажатии на ссылку Как добавить таблицу в текст страницы, описания или новости Установка якоря на странице Формирование рамки таблицы Как изменить размер фотографии (картинок) для всех сущностей в каталоге Как создать и загрузить свою тему в трансформер дизайна (Для версии 4.x и 3.x)
© AdvantShop. Платформа для открытия интернет-магазина.