Help needed: Using classlist to remove classes causes page to go to the top in Chrome

How can be Google Chrome prevented from jumping to the top when removing these clases/unhiding elements, this doesn’t happen on Firefox… and I need both functions: to remove the class from the elements, that is unhiding them and to scroll to the title in question from the link. without unhiding items the scroll works fine, and with both unhiding works but then the scroll is not properly working…

Tried using scrollintoview method as well as scrolltop to compensate this with no success.
Ok I have tried to simplify the code so no working codepen yet I’m afraid…

  1. Event listener on click from an anchor
    linkItem[z].addEventListener('click', clearFilters, false );
  1. Attached function
function clearFilters(event) {
  //set here a timeout so I can tell when the jump happens after unhiding 
    const timeoutID1 = setTimeout(() =>  {
      const headings= document.querySelectorAll('h2, h3, h4, h5, h6');
  for (var e = 0; e < headings.length; e++) {
        headings[e].classList.remove("d-none");    
    }  
,2000);
}

solved with preventdefault at the beginning and this at the end:

const targetId = event.target.getAttribute('href').substring(1);
    const targetElement = document.getElementById(targetId);

    // Calculate the target position
    const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY + -70;

    // Smoothly scroll to the target position
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    });
1 Like