CODE

Плавная прокрутка к якорю jquery со смещением и скоростью анимации

Содержание

Приветствую, вебмастера! У меня многие спрашивают, да и просто интересуются, какой скрипт я использую чтобы была плавная прокрутка к якорю на jquery.

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

Более того, из-за этого бага могут не отправляться формы, а если мы имеем дело с лендингом или каким то коммерческим сайтом, то это потерянный потенциальный покупатель. Такие нюансы весьма важны, если делаете сайты на заказ.

Данный скрипт плавной прокрутки страницы с минимальным количеством кода, с настраиваемым смещением (отступом) и скоростью самой анимации.

Читайте также:

CDN jquery

Для начала, как всегда, подключаем jquery. Я обычно использую CDN и рекомендую версию от 2.x и выше.

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>

Сам скрипт

Далее, после того как подключили jquery, в самый низ страницы, перед закрывающим тегом body устанавливаем сам скрипт плавной прокрутки.

<script>
  jQuery(document).ready(function($) {
    $('.li-nk a').click(function() { // отслеживаем клик по кнопке с классом li-nk
      var scroll_el = $(this).attr('href'); // берем у него содержимое атрибута href, которое начинается на "#section" или ".section"
      if ($(scroll_el).length != 0) { // чтобы избежать ошибки проверяем на существование этого элемента 
        $('html, body').animate({
          scrollTop: $(scroll_el).offset().top - 100 // отступ (пиксели)
        }, 2500); // скорость (миллисекунды)
      }
      return false; // отключаем действие по умолчанию
    });
  });
</script>

Html разметка

Каждой ссылке мы добавляем селекторы (id или класс) в атрибут href для осуществления перехода до нужной секции, и соответственно, не забываем указать этим же секциям такие же селекторы.

<ul>
    <li class="li-nk"><a href="#one">Секция 1</a></li>
    <li class="li-nk"><a href="#two">Секция 2</a></li>
    <li class="li-nk"><a href="#three">Секция 3</a></li>
    <li class="li-nk"><a href="#fo">Секция 4</a></li>
    <li class="li-nk"><a href="#five">Секция 5</a></li>
</ul>

<div id="one">Секция 1</div>
<div id="two">Секция 2</div>
<div id="three">Секция 3</div>
<div id="fo">Секция 4</div>
<div id="five">Секция 5</div>

Вот и все! Это самое простое, быстрое и безотказное решение, какое будет работать на любых cms.