Главная
Web-дизайн
Якоря и плавный переход по якорным ссылкам

Якоря и плавный переход по якорным ссылкам

Якорные ссылки

Доброго времени суток. 🙂

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

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

Такие якорные ссылки часто используются на страницах F.A.Q.. На таких страницах, много разных пунктов с ответами на частые вопросы. Чтобы в ручную не прокручивать весть текст, в начале располагаются эти вопросы с ссылками на нужный абзац. Так же часто такие якорные ссылки используют в лендингах (посадочных страницах). Я тоже часто использую в лендингах такие якоря, если заказчик просит об этом. Лендинги часто длинные и поэтому такие якоря не плохой помощник.

Пример работы таких ссылок можно посмотреть на этой страничке:



Пример

Как сделать переход по якорным ссылкам внутри страницы? Все очень просто. Основная идея в том, чтобы вместо ссылки указать именно имя якоря.

Для начала нужно просто создать ссылку и вместо пути указать якорь и знак решетка перед ним - #

<a href="#yak1">Ссылка на якорь 1</a>

Якорем будет блок с ID - #yak1. Далее просто прописываем нужный элемент с нужным айди.

<div id="yak1"></div>

В нашем случаи - это простой div блок. По сути, для простого перехода это все. При нажатии на такую ссылку, посетителя моментально перебросит на ту часть страницы где расположен блок с якорем.

Чтобы реализовать плавное перемещение по якорям, нужно подключать - jQuery. Когда-то я долго искал нужный скрипт и перерыл кучу информации. У большей половины показаны скрипты, которые просто уже не работают на новых версиях библиотек. Возможно, Вы тоже находили эти скрипты, перед тем, как попасть на мой сайт. Тогда мне попался данный скрипт, который был отличным решением, для моих задач.

Для начала в шапку перед закрывающимся head или в подвал перед закрывающимсяbody нужно подключить библиотеку jQuery.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Убедитесь в том, что это уже не сделано ранее, чтобы не спровоцировать конфликт и неработоспособность скриптов.

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

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

Во второй строке скрипта указывается айди блока с якорными ссылками. Как пример, можно организовать вот такой блок:

<nav id="menu">
	<ul>
		<li><a href="#yak1">Ссылка на якорь 1</a></li>
		<li><a href="#yak2">Ссылка на якорь 2</a></li>
		<li><a href="#yak3">Ссылка на якорь 3</a></li>
		<li><a href="#yak4">Ссылка на якорь 4</a></li>
	</ul>
</nav>

В шестой строке указана цифра 1500 - время в миллисекундах и равно 1,5 секундам. Это время за которое совершается переход к нужному якорю. Чтобы ускорить или замедлить анимацию, просто измените число.

По желанию задаете стили в соответствии с внешним видом страницы и наслаждаемся результатом 🙂 Возможно Вы также захотите, чтобы у посетителя была возможность вернуться наверх, в этом Вам поможет статья - кнопка возврата на верх страницы java и jquery.

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(18 голосов, в среднем: 5 из 5)

Опубликовано 17 комментариев

  • Сергей
    Комментариев: 1

    Спасибо большое!!!! Очень помог!!!!

  • alina
    Комментариев: 1

    Oi, kak zdorovo! i prosto! spasibo vam ot dizainera kotoromu ochenj slozhno programirovatj, no on staraetsja!!!

  • Женя
    Комментариев: 2

    Добрый день. Подскажите как сделать якорь на рубрики. Свои рубрики я вывожу таким кодом

    В итоге у меня выводит 4 вкладки на рубрики внизу страницы. Когда я выбираю одну из рубрик у меня идет переброс на шапку сайта. Подскажите как установить якорь, что бы при выборе рубрики я оставался внизу страницы

  • Женя
    Комментариев: 2

    Добрый день. Подскажите как сделать якорь на рубрики. Свои рубрики я вывожу таким кодом
    <div class="rubrics">
    <?php wp_list_categories('&title_li='); ?>
    </div>
    В итоге у меня выводит 4 вкладки на рубрики внизу страницы. Когда я выбираю одну из рубрик у меня идет переброс на шапку сайта. Подскажите как установить якорь, что бы при выборе рубрики я оставался внизу страницы

    • Виталий
      Комментариев: 269

      Якоря работают в пределах одной странницы, при переходе в другую рубрику, у Вас идет перезагрузка страницы, поэтому якоря и не работают. Если бы это была просто ссылка написанная вручную, например site.com/ssilka.html, то можно было бы добавить в конец нее якорь, и тогда на новой странице Вы автоматом бы переводились в нужное место - например:
      site.com/ssilka.html#yakor1
      А рубрики у Вас задаются автоматически, поэтому не получится просто сделать.

  • Виктор
    Комментариев: 5

    Добрый день, подскажите пожалуйста, на странице landing page 5 якорей, если напрямую к якорю, ввести ссылку типа site.ru#prices , то страница загружается и прокручивается в самый низ, первые 2 якоря нормально, а вот 3-4-5 все после загрузки скролят в низ страницы, если же переходить по якорям имено по ссылкам в меню на сайте то нормально работает. в чем может быть проблема

    • Виктор
      Комментариев: 5

      Точнее проблема в 3ей секции, все якори после 3й секции прокручивают вниз, в этой секции загружаются фото работ, с помощью галереи mosaic flow, подскажите пожалуйста что можно сделать

    • Виталий
      Комментариев: 269

      Посмотрите внимательно, нигде ли больше у Вас не используется такой ID как в якорях 3 4 и тд. ID должен быть только один на весь сайт. Class -может быть до бесконечности, но ID только один.

      • Виктор
        Комментариев: 5

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

        • Виктор
          Комментариев: 5

          ой, не горизонтальная а вертикальная полоса прокрутки)

        • Виталий
          Комментариев: 269

          Поставьте прелоадер, чтобы люди не видел сайт пока он не загрузится. http://gnatkovsky.com.ua/preloader-dlya-sajta-na-javascript-ili-kak-ne-pokazyvat-sajt-poka-polnostyu-ne-zagruzitsya.html

          • Виктор
            Комментариев: 5

            пробовал, прелоадер просто завешивает шторку и все, но происходят те же действия, может как то можно сделать так, если страница загрузилать полностью то начать переход по якорю?

            • Виталий
              Комментариев: 269

              Перед галереей сделайте пустой ДИВ и к нему добавьте якорь, а не к галереи 🙂 Получится что будет опускать к этому диву, но так как он пустой, будет сразу видно галерею, которая идет за ним.

  • droidmod.ru
    Комментариев: 1

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

  • Andrew
    Комментариев: 1

    Дорогие знатоки вордпресса подскажите мне пожалуйста, есть сайт bksclub.ru нужно сделать прокручивающиеся(скроллинговое меню) на одностраничнике bksclub.ru/mk (делался на visual composer)

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий