phpjsJqueryhtmlcssblog

как сделать якорь на странице

Что такое якорь html или зачем нужен якорь html на странице? Сколько видов якорей существует!? Варианты использования якоря.

Подробно о якорях в html

1. Что такое Якорь html
2. Якорь на определенную часть страницы -> href + # + name
3. Якорь на определенную часть страницы -> href + # + id
4. Якорь с другим тегом -> href + # + div + id
5. Как сделать якорь на другую страницу

Скопировать ссылку



Что такое Якорь html

Дадим определение, "Что такое Якорь"


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

Или вот такое определение : Что такое Якорь
Якорь html на странице - это как и морской якорь, выполняет определенную задачу!


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

Сколько типов якорей существует?

На момент написания типов якорей существует:

Тип якоря с атрибутом name

<a name=имя_якоря></a>

И второй тип якоря - это использование уникального идентификатора id

<любой_тег id=имя_якоря></любой_тег>

Как переводится Якорь

Слово "Якорь" переводитсЯ на английский как:

anchor
Скопировать ссылку



Якорь на определенную часть страницы -> href + # + name

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

Обязательное условие для якоря

Имя у якоря должно быть уникальным.

Синтаксис якоря name

Нам нужна ссылка + атрибут "href" + решетка "#" + "имя якоря", вы получите ссылку типа:

<a href="#yakor">Перейдем к якорю.</a>

Если мы возьмем выше показанную ссылку и заменим href="# на name=", топ получим ссылку с атрибутом "name", которыя и будет якорем. Располагаем данный тег в требуемом месте, куда нужно перейти:

<a name="yakor"></a>

Далее... возьмем эти два тега : "ссылку" и "якорь" и поставим их на странице, см. пример использования якоря:




Пример использования якоря в html

Выше приведенные два тега расположим на странице!

Здесь будет ссылка, которую вы видели выше - "<a href="#yakor">Перейдем к якорю.</a>"

Чтобы перейти я якорю -нажмите на ниже идущую ссылку:

Перейдем к якорю.
Скопировать ссылку



Якорь на определенную часть страницы -> href + # + id

Второй пример якоря на определенную часть текста - всё тоже самое. что и в первом пункте, только с той разницей, что вместо атрибута "name" будем использовать id. Для создания якоря с идентификатором id вам понадобится:


Как вы знаете, условие использования id - аналогичные, что и для name - уникальное имя.

Синтаксис якоря id

Для перехода к якорю нам нужна(опять) ссылка + href + # + id:

<a href="#yakor_2">Перейдем к якорю 2.</a>

Для того, чтобы создать якорь с использованием id, вам потребуется любой тег, ну чтобы не наводить разброд в голове, возьмем для якоря тег ссылки "a". Внутри тега располагаем атрибут "id", наш якорь готов:

<a id=yakor_2></a>



Пример якоря в html

Выше я рассмотрел очередную теорию использования якоря вместе с id.

Расположим ссылку с текстом "Перейдем к якорю 2" прямо здесь.

А якорь расположим чуть ниже по странице.

Чтобы приведенный пример сработал, нажмите по ссылке:

Перейдем к якорю 2.





---






Пример реализации работы якоря в html

здесь может быть текст

Выше вы видите такую конструкцию:
<a name=yakor>здесь может быть текст</a>
Теперь давайте вернемся в ту часть страницы, с которой мы сюда пришли вернуться к первой ссылки на которую только что нажали.




Пример реализации работы якоря в html

Выше вы сможете увидеть такую конструкцию если нажмете исследовать элемент:

<a id=yakor_2></a>

Мы можем вернуться в то место, откуда пришли вместо name опять id


Пример якоря в html href + # + div + id

Выше вы сможете увидеть такую конструкцию если нажмете исследовать элемент:

<div id=anchor_id_div></div>

Мы можем вернуться в то место, откуда пришли вместо name id + div

Скопировать ссылку



Якорь с другим тегом -> href + # + div + id

Давайте предположим, что вы не хотите(по разным причинам) использовать тег ссылки в якоре!

Проверим работу якоря с любым другим тегом... для этого вам понадобится:

Опять создаем обычную ссылку для перехода к якорю:

<a href=#anchor_id_div>Ссылка на якорь с другим тегом</a>

Для данного пункта, вместо тега ссылки используем... пусть это будет тег div

<div id=anchor_id_div></div>



Пример использования якоря с другим тегом:

Выше я рассмотрел тему, как использовать другой тег для якоря.

Этот тег расположим, со всеми примерами якорей...

Расположим ссылку на якорь прямо здесь!

Для того, чтобы перейти я якорю с тегом div - нажмите по ссылке ниже:

Ссылка на якорь с другим тегом
Скопировать ссылку



как сделать якорь на другую страницу

Как сделать якорь на другую страницу? Для этого вам понадобится:

Сделаю отдельную страницу с помощью get(почему get) с ссылкой на данный пункт, чтобы при клике на ссылку вас переместило к данному пункту.

На странице размещу ссылку типа:

<a href=https://dwweb.ru/yakor.html#paragraph_anchor_other_page>Перейти к якорю на другой странице</a>

А якорь размещу здесь в данном пункте выше абзаца.

<a name="paragraph_anchor_other_page"></a>

Пример якоря на другую страницу.

Итак...

Чтобы проверить работу якоря на другой странице, переходим по ссылке.

На странице размещена единственная ссылка, с текстом:

Перейти к якорю на другой странице

Которая должна вас вернуть к данному пункту!

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---