Якорные ссылки — это элемент навигации страницы, который позволяет быстро перемещаться с одной ее части на другую. Такие, например, использует Википедия, что позволяет пользователю переходить из содержания сразу к соответствующему описанию. Это обычная ссылка, только ограниченная рамками одной страницы. Обычно «якоря» используют в больших статьях, чтобы пользователю не приходилось скроллить в поисках нужного места, а можно было просто кликнуть на ссылку.

Зачем нужны «якоря»?

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

Кроме того, «якоря» — важный инструмент для структурирования больших статей. С их помощью контент легко разбить на логические блоки, к которым можно перемещаться из содержания. Также можно настроить навигацию и между тематически связанными блоками. Якорные ссылки — это необходимость не только для объемных статей, но и для лендингов.

Как делать якорные ссылки?

«Якоря» имеет смысл ставить в начале больших статей — в блоке с кратким содержанием разделов. Расскажем, как это сделать на примере WordPress. Конечно, можно использовать специальные плагины, которые визуализируют и упрощают процесс, например, Better Anchor Links или TinyMCE Advanced. Но так как многие предпочитают не утяжелять редактор сторонними приложениями и инструментами, приведем алгоритм создания «якоря» в ВордПресс с помощью html-кода:

1. Выбираем заголовок раздела (у нас для примера третьего уровня, но это не важно), к которому будем делать быстрый доступ. Пусть он называется <h3>Заголовок</h3>.
2. Придумываем id для ссылки-якоря и вставляем его перед заголовком. Должно получиться: <h3><a id=»link»></a>Заголовок</h3>.
3. Создаем ссылку на id из нужного места статьи – <a href=»#link»>ссылка на якорь</a>.

Если якорная ссылка ведет не на другую страницу сайта, а на эту же, то достаточно просто указать название «якоря» через # — как в первой части вышеприведенного примера.

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

script>

$(function(){

    $(‘a[href*=#]’).click(function() {

if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)

        && location.hostname == this.hostname) {

            var $target = $(this.hash);

            $target = $target.length && $target || $(‘[name=’ + this.hash.slice(1) +’]’);

            if ($target.length) {

                var targetOffset = $target.offset().top;

                $(‘html,body’).animate({scrollTop: targetOffset}, 500);//скорость прокрутки

                return false;

         }

     }

});

});

</script>

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