html滚动到闪烁页面

Question

为什么用户点击列表中的链接会导致浏览器闪烁？当用户点击相同的链接时，这似乎非常明显。两次。我有办法消除这种情况吗？

如果您单击向上滚动而不是向下滚动的链接，似乎也会发生这种情况。要对此进行测试，请点击列表项＆＃39; 测试＆＃39;然后点击为什么＆＃39;

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="#"属性放在＆＃34;什么是＆＃34;，＆＃34;为什么＆＃34;和＆＃34; Test1＆＃34;链接

jsfiddle