html прокрутить до мерцания страницы

Question

Почему, когда пользователь нажимает на ссылку в списке, это заставляет браузер мерцать? Это кажется очень очевидным, когда пользователь дважды нажимает на одну и ту же ссылку. Есть ли способ устранить это?

Это также происходит, если вы нажмете ссылку, которая прокручивается вверх, а не вниз. Чтобы проверить это щелкните элемент списка 'Test', а затем нажмите кнопку 'Почему'

https://jsfiddle.net/JokerMartini/9vne9423/

Вот основные JS биты, которые делают всю работу ...

JS

function scroll_to_element(element) { 
    $('html, body').animate({scrollTop: $(element).offset().top}, 500); 
} 

$(window).ready(function() { 

    $(".nav-title").click(function() { 
     var target = $(this); 

     // get data-filter text 
     var title = target.data('title').toLowerCase(); 

     // collect section titles 
     sections = $(".section-title"); 

     // loop through and scroll to valid section 
     for (i = 0; i < sections.length; i++) { 
      var section = $(sections[i]); 
      var section_title = section.data('title').toLowerCase(); 

      if (section_title === title) { 
       scroll_to_element(section) 
       // console.log(target); 
      } 
     } 
    }); 
}); 

Answer 1

Вы должны prevent the default behavior анкерной теги перед вызовом вашей пользовательской функции Эк:

$(".nav-title").click(function(e) { 
    e.preventDefault(); 
}); 

Updated Fiddle

Answer 2

поставил href="javascript:void(0);" вместо href="#" атрибута в вашем "Что такое", "Почему" и "Test1" связывает

jsfiddle