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

在調用自定義功能之前，應該阻止錨標記的默認行為 ：

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

更新小提琴

Answer 2

put href="javascript:void(0);" 而不是你的“What is”，“Why”和“Test1”鏈接中的href="#"屬性

的jsfiddle