angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Scroll the title element in the tab widget into view after switching

Browse source
This commit is contained in:
Yannik Rödel 2022-06-12 19:19:30 +02:00
parent 536f3932c4
commit 97bef91387
2 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
assets/main.js Normal file
View file

@ -0,0 +1,20 @@
for (const tabLinkElement of document.querySelectorAll(
'h2 + .tabs-widget > a[href]'
)) {
const titleElement = tabLinkElement.parentElement.previousElementSibling;
tabLinkElement.addEventListener('click', (event) => {
event.preventDefault();
const hash = tabLinkElement.getAttribute('href');
if (history.replaceState) {
// This is a weird hack to make sure that the :target selectors actually
// get updated:
// https://github.com/whatwg/html/issues/639#issuecomment-252716663
history.replaceState(null, '', hash);
history.pushState(null, '', hash);
history.back();
titleElement.scrollIntoView(true);
} else {
location.hash = hash;
}
});
}

2
includes/layouts/base.njk
View file

@ -100,5 +100,7 @@
</div>
</div>
</footer>
<script src="/assets/main.js" lang="text/javascript"></script>
</body>
</html>