Ссылка якорь - как сделать якорь ссылки html в тексте страницы?

17 августа, 2014 Максим Метелев 15815 просмотров Комментариев нет

Всем доброго времени суток дорогие читатели!

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

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

Это очень удобно, пользователю не нужно будет скролить до определенного участка вашей записи, он туда будет попадать сразу.

Итак, сперва создадим две записи на блоге.

Допустим первая запись у нас будет называться «Что такое лето?». Называйте как вам угодно.

Создаем запись с якорем ссылки

и уже из этой статьи делаю якорь ссылки на заметку, например, про солнце

Делаем ссылку на другую запись с якорем

Так, вначале мы создали первую заметку, теперь создаем другую, про солнце. И сейчас самое интересное. В статье про солнце мы поставим якорь на фразу «солнечный спектр»

Ищем тот участок статьи, на который будет попадать пользователь

Содержание

1 Приступаем к созданию якоря ссылки
- 1.1 Рекомендую ознакомиться с этими статьями:

Приступаем к созданию якоря ссылки

Идем в первую запись и создаем в ней ссылку с анкором «солнце» следующего вида:

Создаем якорь ссылки

Код:

http://ustanovka.smarticle.ru/?p=41#sun

1	http://ustanovka.smarticle.ru/?p=41#sun

обратите внимание на хвостик в конце #sun, это не хеш тег, как вы могли подумать. Это идентификатор с именем sun. При клике на такую ссылку мы перейдем в то место, где мы укажем этот идентификатор.

Переходим в код второй записи про «солнце» и указываем в нужном абзаце наш id=»sun» так как показано на этом скриншоте:

Указываем идентификатор якоря ссылки

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