Войти
Регистрация

Как сделать "якоря" на сайте?

Как сделать якоря на сайте?

Здравствуйте, дорогие друзья!

Сегодня поговорим о "якорях", т.е. о якорных ссылках и плавном перемещении к ним.

Что такое якорные ссылки? Давайте с этим разберемся.

Якорные ссылки это ссылки, которые перемещают пользователя по разным разделам сайта без необходимости использования полосы прокрутки.

Если сайт большой, чтобы не пролистывать его до нужного места, существуют якорные ссылки, нажав на которые можно мгновенно переместиться в нужную часть сайта и сделать это плавно.

Чтобы осуществить переход к блокам сайта через меню достаточно HTML, а плавный переход реализуется с применением jQuery.

Для начала необходимо внутри тега <head> подключить библиотеку jQuery.

Вставьте эту строку внутри тега <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Далее давайте сделаем простую разметку для меню, воспользуемся списком HTML в качестве меню:

<nav id="menu">
  <ul>
   <li><a href="#link1">Ссылка на блок №1</a></li>
   <li><a href="#link2">Ссылка на блок №2</a></li>
   <li><a href="#link3">Ссылка на блок №3</a></li>
  <ul>
</nav>

Здесь каждая ссылка ведет на определенный блок на сайте. Чтобы перейти к нужному блоку необходимо их создать, указать и них атрибут id и каждой ссылке в атрибуте href через символ решетки(#) указать значение атрибута id того блока, на который будет переход по этой ссылке

<div id="link1">
  <h3>Заголовок блока №1</h3>
  <p>Какой-то текст</p>
</div>
<div id="link2">
  <h3>Заголовок блока №2</h3>
  <p>Какой-то текст</p>
</div>
<div id="link3">
  <h3>Заголовок блока №3</h3>
  <p>Какой-то текст</p>
</div>

Мы создали 3 блока, каждому блоку установили атрибут id и его значение присвоили атрибуту href у ссылки, ведущей на этот блок. Также написали заголовок и текст блока.

Теперь нажав на любую ссылку в меню сайт пролистнется к соответствующему блоку. Но пролистывание будет мгновенное, я бы даже сказал перекидывание произойдет к блоку, а нам нужен плавный переход. На странице внутри тега <body> вставляем скрипт:

1<script type="text/javascript">
2 $(document).ready(function(){
3  $("#menu").on("click","a", function (event) {
4    event.preventDefault();
5    var id = $(this).attr('href'),
6    top = $(id).offset().top;
7    $('body,html').animate({scrollTop: top}, 1500);
8  });
9});
10</script>

Объясню скрипт:

  • 2-я строка - выполнение функции, когда документ прогрузился.
  • 3-я строка - по клику на ссылку в блоке с id="menu" вызываем функцию и задаем аргумент event.
  • 4-я строка - отменяем стандартное действие браузера при клике на ссылку.
  • 5-я строка - создаем переменную, в которой указываем значение атрибута href ссылки, по которой кликнули.
  • 6-я строка - отмеряем расстояние от верхней границы окна браузера до блока.
  • 7-я строка - плавно делаем переход к блоку.

Вот и все. Теперь Вы знаете как сделать якорные ссылки и плавный переход по ним к соответствующим секциям сайта.

Посмотреть, как это работает можно по этой ссылке: смотреть демо

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?