Accords-Library-Archive
/
v3.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Only smooth scrolling when clicking on toc

This commit is contained in:
DrMint 2024-03-10 14:54:54 +01:00
parent 108d150d98
commit 6dd1780925
2 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/AppLayout/components/Html.astro
View File

@ -519,7 +519,6 @@ const { currentTheme } = Astro.locals;
}
* {
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--color-base-650) transparent;
}

18
src/components/TableOfContent/components/TableOfContentItem.astro
View File

@ -11,7 +11,7 @@ const { entry } = Astro.props;
{/* ------------------------------------------- HTML ------------------------------------------- */}
<li data-prefix={entry.prefix}>
<a href={`#${entry.prefix}`} class="pressable-link">{entry.title}</a>
<a href={`#${entry.prefix}`} class="pressable-link table-of-content-item">{entry.title}</a>
{
entry.children.length > 0 && (
<ol>
@ -44,3 +44,19 @@ const { entry } = Astro.props;
line-height: 125%;
}
</style>
{/* ------------------------------------------- JS --------------------------------------------- */}
<script>
document.querySelectorAll(".table-of-content-item").forEach((element) => {
const href = element.getAttribute("href")?.substring(1);
if (!href) return;
const heading = document.getElementById(href);
if (!heading) return;
element.addEventListener("click", (event) => {
heading.scrollIntoView({ behavior: "smooth" });
event.preventDefault();
});
});
</script>