Below I added the updated code, for self-scrolling to the tab.
For those who applied the “sticky” position, discussed in this post: Scroll is jumpy on some pages.
I wrote the identification of the sticky position and the calculation of the offset depending on it.
For other cases, write a desired offset value for “desiredOffset”.
Also if you want to adjust the scroll position, whether the header is sticky or other circumstances, add a value other than null, as you like for “desiredOffset”.
Updated code:
/**
* After DOM Loaded
*/
document.addEventListener('DOMContentLoaded', () => {
/**
* Lighthouse Audit - Automatically scroll to audit results by clicking on the score
*/
const lighthousePage = document.querySelector('body.mainwp_page_ManageSitesLighthouse');
if (lighthousePage) {
const desiredOffset = null;
const topHeader = lighthousePage.querySelector('#mainwp-top-header');
const calculatedOffset = (getComputedStyle(topHeader).position === 'sticky' && desiredOffset === null) ? topHeader.getBoundingClientRect().bottom : (desiredOffset !== null ? desiredOffset : 0);
const auditsNavElements = lighthousePage.querySelectorAll('.mainwp-lighthouse-score');
auditsNavElements.forEach(el => {
el.addEventListener('click', () => {
const auditDomain = el.dataset.tab.split('-')[0];
const activeTab = lighthousePage.querySelector(`.ui.tab.active[data-tab^=${auditDomain}]`);
const tabTopPos = activeTab.getBoundingClientRect().top + window.pageYOffset - calculatedOffset;
window.scrollTo({
top: tabTopPos,
behavior: 'smooth'
});
});
});
}
});