
Якорные ссылки на сайте — для чего, как их сделать
- Автор: Юлия Бундур
- Дата: 30.04.2020
- 0
Якорные ссылки — это элемент навигации страницы, который позволяет быстро перемещаться с одной ее части на другую. Такие, например, использует Википедия, что позволяет пользователю переходить из содержания сразу к соответствующему описанию. Это обычная ссылка, только ограниченная рамками одной страницы. Обычно «якоря» используют в больших статьях, чтобы пользователю не приходилось скроллить в поисках нужного места, а можно было просто кликнуть на ссылку.
Зачем нужны «якоря»?
Как уже говорилось выше, якорные ссылки созданы в первую очередь для удобства пользователя. Ведь сайты, хоть создаются и оптимизируются под требования поисковиков, все же предназначены для людей. Например, если в статье ссылаются на мнение авторитетного источника или упоминаются аспекты, которые подробно рассмотрели в другом месте, логично сделать ссылку, кликнув на которую человек сразу перейдет к нужной информации. Кнопка «Назад» вернет пользователя обратно к тому месту, где была ссылка.
Кроме того, «якоря» — важный инструмент для структурирования больших статей. С их помощью контент легко разбить на логические блоки, к которым можно перемещаться из содержания. Также можно настроить навигацию и между тематически связанными блоками. Якорные ссылки — это необходимость не только для объемных статей, но и для лендингов.
Как делать якорные ссылки?
«Якоря» имеет смысл ставить в начале больших статей — в блоке с кратким содержанием разделов. Расскажем, как это сделать на примере WordPress. Конечно, можно использовать специальные плагины, которые визуализируют и упрощают процесс, например, Better Anchor Links или TinyMCE Advanced. Но так как многие предпочитают не утяжелять редактор сторонними приложениями и инструментами, приведем алгоритм создания «якоря» в ВордПресс с помощью html-кода:
- Выбираем заголовок раздела (у нас для примера третьего уровня, но это не важно), к которому будем делать быстрый доступ. Пусть он называется <h3>Заголовок</h3>.
- Придумываем id для ссылки-якоря и вставляем его перед заголовком. Должно получиться: <h3><a id=»link»></a>Заголовок</h3>.
- Создаем ссылку на 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>
Возможность плавной прокрутки также может быть настроена через плагины или редакторы сторонних разработчиков.
0 Комментариев в Якорные ссылки на сайте — для чего, как их сделать