Как сделать якорную ссылку

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

Якорная ссылка с плавной прокруткой

Начнем с конструкции и добавления якорной ссылки на веб-страницу. Якорь состоит из двух неразрывных частей. Первая, это ссылка, которая в атрибуте 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.

Посмотреть Demo

15 комментариев
  1. Огромное спасибо. Долго искал рабочий скрипт. Все что находил, все старое и никак не работало в наши дни.)

  2. даже не поленюсь написать, огромное спасибо вы очень мне помогли тоже еле нашёл нормальный срипт!!!

  3. А не подскажете, как тоже самое внутрь кнопки кастомной, ну которые есть в WP сделать.

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

    И как проверить подключена ли к сайту библиотека jquery.

    P.S. Сайт не мой, а одного из наших клиентов и WP для меня относительно темный лес.

    1. Не вижу проблемы. Сделать так же как в примере. Первая кнопка — якорь. Вторая — стоп якорь. Смотрите как выводится кнопка через тело шаблона или визуально, через настройку темы. Ну или от класса к классу сделать плавный переход, как в примере в статье.

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

  4. Спасибо большое за статью и скрипт два дня искал, все понятно и легко, на других все мутно и много воды.

    Один только нюанс не могу решить, к коду добавил менюшку вернее твой код внедрил))) Но когда перехожу на определенный раздел не показывает надпись, а только начала раздела. Я использовал id может через name попробовать или в скрипте можно, что то изменить для этого, в скриптах не разбираюсь, так поверхностно))

    1. Спасибо и не за что! Не до конца понял проблему. То есть верхнее меню, и оно зафиксировано, так? При нажатии на один из пунктов скроллит до стоп-якоря, но меню закрывает название раздела, так?

  5. А у меня на сайте перестали табы работать после добавления скрипта с плавной прокруткой якорных ссылок. Гипнотизировала долго кодировку, чтобы понять откуда сия беда пришла (я небельмес в программировании). Никаких выводоф и причинно следственных связей тоже не разумела. Думала конечно, что скорей всего в скрипте какую-то точечку или буковку снесла. Поди ж ее обнаружь. Но потом дошло, когда активный таб стал при нажатии подозрительно дрыгаться, напоминая телодвижения якорной ссылки. 😡 Пришлось ваш скрипт закомментить и жить без плавностей

    1. Зачем в переключении табов используете ссылку с якорям? В этом же нет никакой необходимости. Ну или в скрипте указать непросто тег ссылки a, а тег с классом.

  6. Спасибо огромное!!!!!!!!!!!!! Только Ваш код сработал!!! Перепробовал уже кучу...

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *