Why is it that when a user clicks on a link in the list, the browser flickers? This issue becomes especially noticeable if a user clicks on the same 'link' twice. Is there a solution to prevent this from occurring?
The problem also seems to arise when clicking on a link that scrolls upwards rather than downwards. To test this, click on the list item 'Test' and then click on 'Why'
https://jsfiddle.net/JokerMartini/9vne9423/
Below are the key JS components responsible for handling all the functionality...
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);
}
}
});
});