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

HTML и CSS WordSmall

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

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

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

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 6
  • PLushechka

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

    • WordSmall

      PLushechka, не за что ;-) Спасибо за комментарий.

  • soroka

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

  • Insane_deth

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

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

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

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

    • WordSmall

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

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

Добавить комментарий
bold quote code