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

Поддержи проект!!!

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

О якорях html

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

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

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

В первом пункте повторим определение - "что такое якорь":


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

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

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

В данный момент существует два вида якорей:

Все ещё поддерживаемый атрибут name(считается устаревшим.)

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

Создаем ссылку вида:

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

Располагаем в требуемом месте якорь:

<a name=yakor></a>



Результат исполнения якоря в html

Для того, чтобы протестировать работу якоря в html нажмите по ссылке:

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

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

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

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


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

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

Создаем ссылку вида:

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

Располагаем в требуемом месте якорь:

<a id =yakor_2></a>



Результат исполнения якоря в html

Для того, чтобы протестировать работу якоря в html нажмите по ссылке:

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





---






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

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

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




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

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

<a id=yakor_2></a>

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

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

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

Чтобы сделать якорь на другую страницу нам понадобится :

Тег ссылки

Сам адрес, возьмем предыдущую тему и якорь на первую тему. После html добавляем решетку и якорь paragraph_1

https://dwweb.ru/page/css/property/005_width_css.html#paragraph_1

Соберем весь якорь на другую страницу вместе:

Html :
<a href=https://dwweb.ru/page/css/property/005_width_css.html#paragraph_1 target=_blank>Якорь на другую страницу</a>
Результат: Якорь на другую страницу

---

Вас может еще заинтересовать список тем : #HTML | #URL |

---

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

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

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

Теги:
якорь на странице якорь на другой странице якорь на странице html ссылка якорь на странице якорь внутри страницы как сделать якорь на странице якорь на другую страницу html html якорь внутри страницы ссылка на якорь на другой странице прокрутка страницы до якоря wordpress якорь на странице плавная прокрутка страницы до якоря переход на якорь другой страницы якоря на страницах сайта как сделать якорь на другую страницу html ссылка на якорь на другой странице добавить якорь на страницу как сделать якорь на странице html как сделать якорь на другой странице html поставить якоря на странице html перезагрузка страницы по якорям