» » Ссылки внутри страниц - Якоря

Ссылки внутри страниц - Якоря

0 452

Якорная ссылка

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

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

Пример заголовка якорной ссылки.

Как устанавить ссылки внутри страниц - Якоря на свои страницы.

Рассмотрим следующий пример: на название заголовка (темы, новости и т.д.) - ставим такую ссылку (для полной ясности я использую пример на этой странице и поставлю ссылку в самом низу страницы "Якоря" на свой загаловок на этой странице с названием - "Пример заголовка якорной ссылки")

И так, загаловок мы прописываем следующим образом:
<a name="yakoray">Пример заголовка якорной ссылки</a>

Где:
<a name="yakoray"> - это, если можно так назвать, ссылочное имя нашему заголовку. Имена, в нашем случае "yakoray", можно давать абсолютно любые (только чтобы не повторялись) из латинских букв и строго без цифр.

Далее рассмотрим пример ссылки, которая будет у вас стоять в содержании, меню или навигации, где при нажатии на неё произойдёт автоматическое перемещение на наш "Заголовок", в данном случае в нашем примере на заголовок "Пример заголовка якорной ссылки" (выше).

Якорная ссылка у нас будет иметь такой вид:
<a href="#yakoray">Якоря</a>

Обратите внимание: "#" на этой ссылке ставится обязательно, а так же имена "yakoray" прописываются в обоих случаях строго одинаково.

И последнее, смотрим что у нас получилось. При нажатии внизу на нашу ссылку "Якоря" (ниже) мы перемещаемся строго на наш загаловок Пример заголовка якорной ссылки.

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

Загаловок остаётся без изменений:
<a name="yakoray">Пример якорной ссылки</a>

Якорная ссылка выглядит уже так:
<a href="http://age-dragon.com/scripts/yakorya.html#yakoray"> Якоря </a>

Соответственно, как и при работе с обыкновенными ссылками, здесь так же можно использовать вместо текста любую картинку.

И наконец последнее, разберём тот случай, когда при клике на ссылку "Наверх" мы сразу перемещаемся в самое начало страницы.

Данная ссылка очень простая:
<a href="#"><h6>Наверх</h6></a>

А вот для плавного перехода на верх страницы нам потребуется уже ява скрипт, и эту тему мы рассмотрим на примерах в статье cкрипт плавного перехода

На этом описание ссылок внутри страниц закончено.

 

Нажмите - ЯКОРЯ

Похожие новости