Главная Новости

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

Опубликовано: 01.09.2018

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

Ссылка якорь, как использовать? - Константин Хмелев

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


Основы HTML - якоря в ссылках

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

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

3D стерео фильмы для 5D
rss