» »

Создать на сайте переход по якорной ссылке

Создать на сайте переход по якорной ссылке

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

Наверное делается для удобства исследования и усвоения информация для пользователя и гостей, в неприятном случае заметку имеют все шансы проигнорировать из-за не очень хорошей читабельности. В данном помогает в писание тегов h2 и h3, а еще внедрение навигации с использованием якорных гипер ссылок.

Но с начало разберем, что за функция такая, и где она больше пременячется.

Якорь - это метка, что изначально идет с неповторимым личным номером, которую располагают в конкретном месте интернет-страницы. Предоставленный эффект работы, что специализирован для скорого перехода к ней при клике на созданную якорную ссылку. В главном якоря употребляются в заголовках h2 и h3, но некоторые администраторы или мастера употребляют их еще и в самом тексте который будет использован в описание любого тематического материал.

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


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

Ниже представлен образчик таковых переходов.

Для заголовка возьмем одно значение значение:
Код
<a href="#nav1">Здесь будет якорь для заголовка</a>


Если нужно вам использовать еще одну, то значение другое:
Код
<a href="#nav2">Здесь задается якорь уже для текста описания</a>

Как поставить плавную прокрутку на якорь


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

Код
<script type="text/javascript">$(document).ready(function(){
  $('a[href*=#]').bind("click", function(e){
  var anchor = $(this);
  $('html, body').stop().animate({
  scrollTop: $(anchor.attr('href')).offset().top
  }, 283);
  e.preventDefault(); });
  return false; });
  </script>

PS - теперь у вас появилась самостоятельная функция, где сами задаете скорость, при редактирование. Что по умолчанию стоит 283, где вы больше задаете в цифрах, тем намного медленнее и плавнее произойдет переход.

Также есть еще похожий материал, где можете посмотреть еще варианты по этой тематике.
15.11.2017 Просмотров: 358 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar