Якорная ссылка может стать отличной навигацией контента за счет перемещения с одной части статьи к другой. И это на самом деле очень удобно, а иногда даже практично. Давайте рассмотрим, как в целом делается якорная ссылка.
Якорная ссылка с плавной прокруткой
Начнем с конструкции и добавления якорной ссылки на веб-страницу. Якорь состоит из двух неразрывных частей. Первая, это ссылка, которая в атрибуте href
содержит уникальный адрес документа начинающий с символа решетки (#
), и непосредственно является названием якоря.
Вторая часть, это уже сам якорь, задан с помощью атрибута name
. Он будет тем местом, где останавливается страница при нажатии на ссылку с уникальным именованием.
Пример.
<!-- Первая часть якоря. Ссылка для нажатия на переход --> <a href="#anchor">Нажми на меня</a> <!-- Вторя часть якоря. Стоп место --> <a name="anchor">Спасибо, что нажал на меня</a>
Есть другой вариант якорной ссылки, но не сильно отличающийся от первого. Разница вся в том, что вместо атрибута name
пишется уникальный идентификатор ссылки, а первая часть остается неизменной.
Пример.
<!-- Первая часть якоря. Ссылка для нажатия на переход --> <a href="#anchor4">Пример с Идентификатором</a> <!-- Вторя часть якоря. Стоп место --> <a id="anchor4">Пример с Идентификатором (стоп якорь)</a>
Надеюсь, изложено доступно и понятно. Как видно, трудного ничего нет, поэтому не должно возникнуть затруднений. Осталась не раскрыта третья часть конструкции, а именно скрипт, который сделает плавный переход всех якорных ссылок (устанавливается по желанию).
Сам скрипт небольшой (источник скрипта), подключается к сайту обычным способом (header, footer, отдельный файл). Вот он собственной персоной:
<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>
Напомню, что для работы скрипта необходима подключение библиотеки jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Добавляем якорную ссылку на другую страницу сайта
Когда происходит клик по якорной ссылке, то можно заметить, как в адресной строке после окончания .html
добавляется идентификатор якоря. По сути, это точный адрес якоря. Таким образом, возможно указать перемещение не только по одной веб-странице, а даже перемещаться на другой сайт к определенному разделу. Для этого нужно задать в атрибуте href
адрес с окончанием якоря.
Пример.
<!-- Первая часть якоря. Ссылка для нажатия на переход --> <a href="https://wordsmall.ru/karta-sajta.html#anchor">Переход на другой сайт/веб-страницу</a> <!-- Вторя часть якоря. Стоп место --> <a name="anchor">Переход на другой сайт/веб-страницу (стоп)</a>
Плавный переход от блока к блоку (скроллинг)
Вот еще один момент, касающийся переходов от одного веб-элемента к другому. Если якорная ссылка не решает задачу, можно просто использовать скроллинг. Он выполнит плавный переход от любого класса или идентификатора к другому и это необязательна должна быть ссылка.
Пример.
<!-- Первая часть. Элемент для нажатия на переход --> <div class="clikblock">От блока к блоку</div> <!-- Вторя часть. Стоп место --> <div class="stopblock">От блока к блоку(стоп)</div>
<script> $(function(){ $('.clikblock').click(function(){$('html,body').animate({scrollTop:$('.stopblock').offset().top}, 500);}); }); </script>
Для работы скрипта также нужна библиотека jQuery.
Огромное спасибо. Долго искал рабочий скрипт. Все что находил, все старое и никак не работало в наши дни.)
PLushechka, не за что 😉 Спасибо за комментарий.
даже не поленюсь написать, огромное спасибо вы очень мне помогли тоже еле нашёл нормальный срипт!!!
Не за что)
А не подскажете, как тоже самое внутрь кнопки кастомной, ну которые есть в WP сделать.
То есть имеется кнопка в нее прописать переход к якорю, который находится на той же странице.
И как проверить подключена ли к сайту библиотека jquery.
P.S. Сайт не мой, а одного из наших клиентов и WP для меня относительно темный лес.
Не вижу проблемы. Сделать так же как в примере. Первая кнопка — якорь. Вторая — стоп якорь. Смотрите как выводится кнопка через тело шаблона или визуально, через настройку темы. Ну или от класса к классу сделать плавный переход, как в примере в статье.
Библиотеку можно проверить через исходный код, через файлы темы или через инструменты веб-разработчика в браузере.
Спасибо большое за статью и скрипт два дня искал, все понятно и легко, на других все мутно и много воды.
Один только нюанс не могу решить, к коду добавил менюшку вернее твой код внедрил))) Но когда перехожу на определенный раздел не показывает надпись, а только начала раздела. Я использовал id может через name попробовать или в скрипте можно, что то изменить для этого, в скриптах не разбираюсь, так поверхностно))
Спасибо и не за что! Не до конца понял проблему. То есть верхнее меню, и оно зафиксировано, так? При нажатии на один из пунктов скроллит до стоп-якоря, но меню закрывает название раздела, так?
А у меня на сайте перестали табы работать после добавления скрипта с плавной прокруткой якорных ссылок. Гипнотизировала долго кодировку, чтобы понять откуда сия беда пришла (я небельмес в программировании). Никаких выводоф и причинно следственных связей тоже не разумела. Думала конечно, что скорей всего в скрипте какую-то точечку или буковку снесла. Поди ж ее обнаружь. Но потом дошло, когда активный таб стал при нажатии подозрительно дрыгаться, напоминая телодвижения якорной ссылки. 😡 Пришлось ваш скрипт закомментить и жить без плавностей
Зачем в переключении табов используете ссылку с якорям? В этом же нет никакой необходимости. Ну или в скрипте указать непросто тег ссылки
a
, а тег с классом.Спасибо огромное!!!!!!!!!!!!! Только Ваш код сработал!!! Перепробовал уже кучу...
Не за что! Приходите еще.
Большое спасибо. Работает.
спасибо...до сих пор актуально
Приходите еще)