Главная
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.

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




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


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

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

  • Сергей
    Комментариев: 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 вкладки на рубрики внизу страницы. Когда я выбираю одну из рубрик у меня идет переброс на шапку сайта. Подскажите как установить якорь, что бы при выборе рубрики я оставался внизу страницы

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

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

      • Александр
        Комментариев: 1

        И все же , Как сделать? У меня схожая ситуация, мне нужно сделать переход к следующей странице, в которой находится табы на 5 вкладок. И вот, нужно перейти на некоторую вкладку таба. Допустим на 3-ч вкладка 4-й эелемент в нею.
        Как это реализовать? Уже все обшерстил, не могу найти. Помогите пожалуйста.

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

          Тут нужно знать принцип работы табов. Может Вам не якоря нужны, а легче сделать каким то событием onclick.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Павел
    Комментариев: 4

    В вордпресс не получается так сделать.
    То есть все работает, но не плавно переходит. Помогите, пожалуйста
    Страница: http://muzykantam.net/bez-rubriki/test.php

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

      У Вас не работает скрипт. И просто происходит скачек на якорь. Скрипт нужно разместить в правильном месте. Возможно у Вас не подключилась библиотека или конфликт с ней. То есть попробуйте ее не подключать, а сам скрипт подключить в подвале сайта.

      • Павел
        Комментариев: 4

        Ничего не получается. Но у меня уже есть похожие скрипты и все работает. А этот не работает..
        Вот тут http://muzykantam.net/kak-nastroit-gitaru-novichku.php вначале статьи есть краткое содержание, там Скрыть/открыть, тоже плавно работает. А этот скрипт не хочет работать, куда бы я его не пихал. Помогите

      • Павел
        Комментариев: 4

        Кстати, вы правы, библиотека уже была подключена. И скрипт пробовал в подвал сайта писать. Все равно ничего.

      • Павел
        Комментариев: 4

        Видно, у моего сайта аллергия на этот скрипт)) Поставил немного другой, все работает. Спасибо, дальше я сам)

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

    Здравствуйте . Я присваивал строке свой id (сделал текстовый блок и присвоил ему id), потом в произвольных ссылках меню прописывал этот id через # , но все равно скролинг не работает , может быть Вы знаете как его сделать? Мой сайт qubhookah.beget.tech , то есть я хочу при нажатие на кнопку «Try»сделать скроллинг.
    Я думаю дело в каком то скрипте , но не как не могу понять в каком(

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

    Приветствую! Может подскажете, возможно ли сделать перемещение по якорям на одной странице с помощью скроллинга (колесом мышки)?

  • Игорь
    Комментариев: 2

    Добрый день! Есть таким образом проиндексированные правила пользования сайтом и переход работает, но мешает шапка сайта, которая зафиксирована и имеет больший z-index. Текст прокручивается до параграфа и остается под шапкой. А как поднимать текст, чтобы наименование параграфа было в аккурат шапке?...

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

      Есть в скрипте такая строка:
      $('body,html').animate({scrollTop: top}, 1500);
      Замените ее на такую
      ('body,html').animate({scrollTop:top -100}, 1500);
      По сути, если заметили мы просто после переменной top добавили значение -100. Это отступ в 100 пикселей от верху. Замените на высоту вашего меню и текст, блок или что у вас будет при прокрутке по якорю останавливаться как раз под фиксированным меню.

      • Игорь
        Комментариев: 2

        Нашел в файле jQuery.joyride-2.scrollTop: top}, 1500);.min.js нечто похожее:
        e (html, body).stop ().animate ({scrollTop:n}, s.scrollSpeed)
        Не вышло.... похоже не то..
        Еще забыл упомянуть. Правила с якорями лежат в div -от кашерно прокручивается, но и вся страница поднимается тоже..

  • Олег
    Комментариев: 1

    Здравствуйте, подскажите пожалуйста!
    Как можно реализовать такую же анимированную кнопку, которая показывает, что внизу тоже есть информация.
    Как данном сайте ( https://www.ulovanet.ru/ )

  • Николай
    Комментариев: 1

    А где именно указывается во второй строке скрипта айди блока??

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

    Добрый день
    сайт http://miar-trans.ru/
    пробую сделать плавный переход (по названию О КОМПАНИИ) по нажатию на стрелку не получается
    Сможете помочь

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

      Там допущено очень много ошибок. Внимательно читайте статью и смотрите код 🙂
      Почему у меня в статье указана ссылка так
      href="#yak1"
      А вы почему то решили еще и слэш влепить перед решеткой - href="/#tarif" .Где вы это увидели????

      Чтобы счтрелка стала ссылкой, нужно стрелку вложить в ссылку, а не наоборот как сделали вы.
      <div class="arrow"><a href="/#tarif"></a></div>
      В итоге у вас есть блок в нутри которого с размером 0*0пикселей ссылка. Вы на нее попадете нажимая? нет 🙂
      Так же ваша ссылка ведет в никуда. Ваш блок О КОМПАНИИ - должен иметь id="tarif". У вас этого нет. Вместо этого вы перед ним добавили <a name="tarif"></a>. Вот где вы это у меня в статье увидели?????????? Для кого я пишу стараюсь, не понятно 🙂

      Так же моя статья рассчитана на переход от меню к блокам. У вас единичный элемент. Скрипт и выполнение будет совсем другим.
      Ваша ссылка должна быть такой
      <a id="bt_sld" href="#tarif"><div class="arrow"></div></a>

      Ваш блок О КОМПАНИИ начинаться так <div class="content" id="tarif">

      А скрипт будет примерно таким:
      jQuery(document).ready(function($){
      $("#bt_sld").on("click",function(event){
      event.preventDefault();
      var id=$(this).attr('href'),top=$(id).offset().top;
      $('body,html').animate({scrollTop:top},500)});
      });

  • Ирек
    Комментариев: 7

    Здравствуйте! Как добавить адрес якоря в адресную строку? Переходы по якорям есть, а в адресной строке ничего не отражается. Мне это нужно для быстрых ссылок в рекламе Яндекс Директ.

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

      Скрипт так устроен, чтобы якоря не отображались. Если вам надо ссылка с якорем для стороннего сервиса, добавляйте к ссылке решетку и айди блока, до которого нужно переместить посетителя.
      Примеры:
      Например если вы перейдете по адресу http://gnatkovsky.com.ua/#colophon, то вас сразу же перебросит к подвалу моего сайта.
      По адресу - http://gnatkovsky.com.ua/yakorya-i-plavnyj-perexod-po-yakornym-ssylkam.html#nav-single
      к навигации, как понимаете я указал айди блоков навигации #nav-single и #colophon
      Так что просто добавляйте таким образом ссылки и можете направить посетителя куда угодно на странице, указав лишь правильный id нужного блока.

  • Ирек
    Комментариев: 7

    Это опять я! Виталий, есть такая быстрая ссылка с utm-метками: http://irekdavletbaev.ru/#gallery/?utm_medium=cpc&utm_source=yandex&utm_campaign={campaign_id}&utm_content={ad_id}&utm_term={keyword}&source_type={source_type}&source={source}=bs1_{ad_id}
    Но по ней переход не происходит, а происходит переход лишь по этой части: http://irekdavletbaev.ru/#gallery
    Это означает, что всё это нужно добавлять в код?

  • Ирек
    Комментариев: 7

    По ссылке с utm-метками переход идёт только на главную страницу

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

      Якорь должен быть всегда в конце. То бишь #gallery добавляется в конец, после всего, ссылки, utm и тд. Если я делаю вам вот такую ссылку
      http://irekdavletbaev.ru/?utm_medium=cpc&utm_source=yandex&utm_campaign={campaign_id}&utm_content={ad_id}&utm_term={keyword}&source_type={source_type}&source={source}=bs1_{ad_id}#gallery

      То ваш сайт открывается не сначала, где мужик с собакой, а на блоке ФОТОГАЛЕРЕЯ

  • Ирек
    Комментариев: 7

    Здравствуйте, Виталий! Может быть вопрос не по адресу, но всё же! У меня есть сайт: irekdavletbaev.ru
    Когда заходишь на главную страницу и сдвигаешь её мышкой чуток вниз, а потом опять возвращаешь на место, то происходит смещение нескольких элементов на ней. Почему это происходит и как бороться с этим?

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

      Это происходит из за фиксированного меню вверху. Изначально это обычный блочный релативный элемент, а при скроле ему добавляется определенный класс и он становится фиксированным, в итоге то место, что он занимал исчезает и весь контент на высоту этого меню подпрыгивает вверх, ну и при возвращении назад, все в обратном порядке. Первое решение, что пришло мне в голову, после меню разместить блок с точно такой же высотой как и у меню. Прописать ему display:none в стилях, чтобы его не было изначально видно. Далее скрипту, что делает меню фиксированным добавить параметры, чтобы когда он добавлял меню класс с фиксацией, так же показывал наш ранее скрытый блок.

      • Ирек
        Комментариев: 7

        Признаюсь, я не силён в этих вещах, но если бы Вы мне помогли это исправить , то я бы с Вами расчитался! Конечно, если речь идёт о небольшой сумме. Если Вы согласны, то напишите мне на почту. И все подробности, что Вам нужно.

  • Александр
    Комментариев: 3

    Здравствуйте! Скрипт работает, огромное спасибо.
    У меня сайт на бутстрапе. И в одну из секций вставлена бутстраповская карусель. После применения Вашего скрипта у карусели перестало работать перелистывание по нажатию на стрелки. Вместо того, чтобы перелистывать, нажатие на стрелку плавно подводит весь блок карусели к верху окна браузера. Так как на стрелках висят ссылки на блок карусели href=#carousel.
    Как мне исключить обработку именно по id="carousel"?

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

      Здравствуйте! Мало информации, чтобы можно было решить вашу проблему, ссылку на сайт оставили бы, чтобы оценить ситуацию, а так я вряд ли смогу помочь.

  • Александр
    Комментариев: 3

    http://utrome34.beget.tech
    Кстати с бутстраповским аккордеоном та же ситуация

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

      Взглянул на код у вас на сайте и намой и понял, что это вообще разные коды. Возможно вы уже нашли другой, но он работать не будет. В нем есть строка
      $('a[href*=#]').click(function() {
      Что означает всем ссылкам на сайте где есть решетка перед словом присвоить этот скрипт. В итоге все ваши аккордеоны не работают.
      У меня в коде была строка
      $("#menu").on("click","a", function (event) {
      В которой говорилось, что при нажатии на ссылки, размещенные внутри элемента с айди menu, будет переход по якорям. То бишь только те ссылки что в меню и все. У вас меню имеет айди defaultNavbar1 заменили ним бы тот айди что был в моем скрипте и все.

      • Александр
        Комментариев: 3

        Благодарю, все работает замечательно.
        А можно на этот скрипт "повесить" еще одно меню с другим айди?

  • Игорь
    Комментариев: 1

    Пробовал тот скрипт, что на сайте выше, не получалось плавную прокрутку включить. Попробовал вот этот, зарабатало -

    $(document).ready(function(){
    $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
    'scrollTop': $target.offset().top
    }, 600, 'swing', function () {
    window.location.hash = target;
    });
    });

    });

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

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

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

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

Это не спам *

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

Привет дорогой друг

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