Якорь ссылки — обычная ссылка, которая позволяет перейти на элемент находящийся на той же странице.
Очень полезная функция, которая применяется при большой статье. Нередко на сайтах можно увидить блок с кратким содержанием статьи, в котором и находятся ссылки-якори. Также такую ссылку часто используют перед футером страницы, чтобы вернуться к началу.
Якорь задается также, как обычная ссылка, с помощью тега <a> и атрибута href. Вместо ссылки на другую страницу, вы вводите id необходимого элемента.
Пример кода с ссылкой-якорем:
<a href="#yakor_1">Ссылка-якорь 1</a> <a href="#yakor_2">Ссылка-якорь 2</a> ... ... <h2 id="yakor_1">Какой-то заголовок для якоря 1</h2> <p> ... </p> <h2 id="yakor_2">Какой-то заголовок для якоря 2</h2> <p> ... </p>
Ссылки могут различаться, в зависимости от типа элемента, на который она ссылается:
- Для того, чтобы указать ссылку на определенный элемент страницы нужно ввести его id, в качестве параметра атрибута href. Вводимый id должен вводиться со знаком «#» вначале.
- Если якорь находится на другой странице, то необходимо ввести ссылку на эту страницу, а затем уже id якоря, со знаком «#».
Пример:
<a href="/categ/adres_stranicy.html#yakor_1">Ссылка-якорь 1</a>
Обратите внимание на синтаксис вышепоказанного кода и атрибута id. Когда вы задаете id элемента, не нужно ставить знак «#».
Атрибут id может использоваться абсолютно во всех тегах. Нельзя использовать id в тегах внутри блока
. Атрибут считается валидным только для тегов .Особенности якоря ссылки:
Переход по ссылке-якорю может быть неправильно запрограммирован. То есть, вы можете сделать резкий переход с верхнего элемента в нижний, при этом оформив это так, что пользователь потеряется. Чтобы избежать этого, можно написать функцию плавного перехода. Подробнее об этом вы узнаете, изучая JS(JavaScript).
Никогда не пренебрегайте этой функции, особенно при создании больших статей или лендингов. Пользователю может и не обязательно читать статью полностью, либо же просматривать все блоки страницы.