html滾動到閃爍頁面

Question

爲什麼當用戶點擊列表中的鏈接會導致瀏覽器閃爍？這似乎是非常明顯的，當用戶點擊兩次相同的'鏈接'。有沒有辦法讓我消除這種情況？

如果您單擊向上滾動而不是向下滾動的鏈接，它似乎也會發生。爲了測試這個點擊列表項「測試」，然後單擊「爲什麼」

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