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();
});

更新小提琴