Моргает экран по клику на кнопку

187

07 октября 2017, 22:13

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

  $('.btn--scroll').click(function(){
    $('html, body').animate({scrollTop:$('#form-head').position().top}, 1000);
   });
  <h2 class="h2" id="form-head">Заявка</h2>
  <a href="#form-head" class="btn btn--scroll">Заказать звонок</a>

Answer 1

Для того, чтобы избавиться от такого мерцания и дергания, нужно в обработчике отменить стандартное поведение ссылки, используя .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>