2

Есть скрипт плавного скрола на jQuery. Столкнулся с такой проблемой, - когда нажимаю на кнопку немного дергает и мерцает экран перед скроллом.
Кто-нибудь сталкивался ?

$('.btn--scroll').click(function() {
  $('html, body').animate({
    scrollTop: $('#form-head').position().top
  }, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="h2" id="form-head">Заявка</h2>

<a href="#form-head" class="btn btn--scroll">Заказать звонок</a>

4
  • А якорь на ссылке есть?
    – Cheg
    6 окт 2017 в 20:41
  • поставил сейчас, дергать перстал, но все равно мерцает очень неприятно( 6 окт 2017 в 20:44
  • Добавьте код вашей разметки
    – Cheg
    6 окт 2017 в 20:45
  • обмновил, можно смотреть 6 окт 2017 в 20:47

1 ответ 1

4

Для того, чтобы избавиться от такого мерцания и дергания, нужно в обработчике отменить стандартное поведение ссылки, используя .preventDefault():

$('.btn--scroll-with-lag').click(function(e) { // с мерцанием
  $('html, body').animate({
    scrollTop: $('#form-head').position().top
  }, 1000);
});

$('.btn--scroll-without-lag').click(function(e) { // без мерцания
  e.preventDefault();
  $('html, body').animate({
    scrollTop: $('#form-head').position().top
  }, 1000);
});
a {
  display: inline-block;
  margin-bottom: 2000px;
}

#form-head {
  background: #f00;
  height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#form-head" class="btn--scroll-with-lag">btn--scroll-with-lag</a>
<a href="#form-head" class="btn--scroll-without-lag">btn--scroll-without-lag</a>
<div id="form-head"></div>

1
  • то, что нужно) Благодарю ) 6 окт 2017 в 20:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.