Как сделать чтобы переход по якорю был плавным 8

Как сделать чтобы переход по якорю был плавным	8
Как сделать чтобы переход по якорю был плавным 8
Как сделать чтобы переход по якорю был плавным	8

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

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


Метки: jQuery без плагина закладка код переход скрипт ссылка якорь


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


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

Проголосовало: 56, в среднем: 4.8 из 5


Предыдущая запись
Анимированная кнопка обратного звонка

Следующая запись
Как прижать подвал, футер к низу страницы

Похожие записи:
  • Плавный переход по всем якорным ссылкам, якорям на сайте
    Плавный переход по всем якорным ссылкам, якорям на сайте
  • Как сделать адаптивное видео YouTube на сайте
    Как сделать адаптивное видео YouTube на сайте
  • Красивый ползунок выбора значения. UI ползунок на сайт
    Красивый ползунок выбора значения. UI ползунок на сайт
  • Изменение, создание, всплывающих подсказок title с помощью CSS
    Изменение, создание, всплывающих подсказок title с помощью CSS
  • Фиксированная, открывающаяся, боковая панель, для меню на сайт
    Фиксированная, открывающаяся, боковая панель, для меню на сайт

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

Как сделать чтобы переход по якорю был плавным	8 Как сделать чтобы переход по якорю был плавным	8 Как сделать чтобы переход по якорю был плавным	8 Как сделать чтобы переход по якорю был плавным	8 Как сделать чтобы переход по якорю был плавным	8 Как сделать чтобы переход по якорю был плавным	8 Как сделать чтобы переход по якорю был плавным	8 Как сделать чтобы переход по якорю был плавным	8 Как сделать чтобы переход по якорю был плавным	8 Как сделать чтобы переход по якорю был плавным	8 Как сделать чтобы переход по якорю был плавным	8

Читать далее:




Дачные поделки из зонта




Поздравления с серебрянной свадьбой 25 лет




Как сделать комнату в космическом стиле




Как лучше проводить отопление схемы




Ваза из бутылки своими руками нитками