Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rosary: make scroll-to-top button work without JS
All checks were successful
CI / update (push) Successful in 1m27s
Details

Browse Source 
Replace <button> with <a href="#top"> anchor link. JS intercepts for
smooth scrolling, no-JS falls back to hash navigation.
This commit is contained in:
Alexander Bocken
2026-02-13 13:18:35 +01:00
parent 96a91ed8dd
commit aa64cd8306
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
View File

@@ -634,6 +634,8 @@ h1 {
.scroll-top-button { .scroll-top-button {
margin: 2rem auto 0; margin: 2rem auto 0;
width: fit-content;
text-decoration: none;
} }
.scroll-padding { .scroll-padding {
@@ -688,7 +690,7 @@ h1 {
<meta name="description" content={labels.pageDescription}> <meta name="description" content={labels.pageDescription}>
</svelte:head> </svelte:head>
<div class="page-container"> <div class="page-container" id="top">
<h1>{labels.pageTitle}</h1> <h1>{labels.pageTitle}</h1>
@@ -949,9 +951,9 @@ h1 {
<p><span class="symbol">♱</span>{labels.footnoteSign}</p> <p><span class="symbol">♱</span>{labels.footnoteSign}</p>
</div> </div>
</div> </div>
<button class="scroll-top-button action_button" onclick={() => window.scrollTo({ top: 0 })} aria-label="Scroll to top"> <a class="scroll-top-button action_button" href="#top" onclick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} aria-label="Scroll to top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
</button> </a>
<div class="scroll-padding"></div> <div class="scroll-padding"></div>
</div> </div>