Overhaul back to top button and link

Make back-to-top button an anchor element and shows back to top text link if JavaScript is disabled
This commit is contained in:
Helen Chong 2024-06-11 04:22:50 +08:00
parent 1a4ccfaefe
commit f7c62f5962
2 changed files with 43 additions and 32 deletions

View File

@ -13,7 +13,6 @@
</nav> </nav>
{%- endif -%} {%- endif -%}
<p><a class="footer__top-link" href="#top">Back to Top</a></p>
{%- include "global/top-btn.njk" %} {%- include "global/top-btn.njk" %}
</footer> </footer>
@ -55,24 +54,6 @@
justify-self: center; justify-self: center;
} }
.footer__top-link::before,
.footer__top-link::after {
--arrow-margin: 0.3em;
content: "";
display: inline-block;
border-bottom: 0.6rem solid currentColor;
border-left: 0.4rem solid transparent;
border-right: 0.4rem solid transparent;
}
.footer__top-link::before {
margin: 0 var(--arrow-margin) 0 0;
}
.footer__top-link::after {
margin: 0 0 0 var(--arrow-margin);
}
/* Screen sizes larger than mobile */ /* Screen sizes larger than mobile */
@media only screen and (min-width: 30rem) { @media only screen and (min-width: 30rem) {
.footer { .footer {

View File

@ -1,22 +1,28 @@
<button class="top-btn hidden" aria-label="Scroll to top"> <a href="#top" class="top-btn hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg> </svg>
</button> <span class="visually-hidden">Back to Top</span>
</a>
<noscript>
<p><a class="top-link" href="#top">Back to Top</a></p>
</noscript>
<style> <style>
.top-btn,
.top-btn:hover {
color: var(--clr-top-btn-txt);
}
.top-btn { .top-btn {
position: fixed; position: fixed;
margin: 0;
padding: 0;
bottom: 0.5rem; bottom: 0.5rem;
right: 0.5rem; right: 0.5rem;
z-index: 999; z-index: 999;
border: none;
background-color: var(--clr-top-btn-bg); background-color: var(--clr-top-btn-bg);
color: var(--clr-top-btn-txt);
border-radius: 50em; border-radius: 50em;
width: 2rem; height: 2rem;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
} }
@ -24,23 +30,47 @@
outline: 0.25em solid var(--clr-top-btn-bg); outline: 0.25em solid var(--clr-top-btn-bg);
outline-offset: 0.15em; outline-offset: 0.15em;
} }
.top-link::before,
.top-link::after {
--arrow-margin: 0.3em;
content: "";
display: inline-block;
border-bottom: 0.6rem solid currentColor;
border-left: 0.4rem solid transparent;
border-right: 0.4rem solid transparent;
}
.top-link::before {
margin: 0 var(--arrow-margin) 0 0;
}
.top-link::after {
margin: 0 0 0 var(--arrow-margin);
}
</style> </style>
<script defer> <script defer>
{# Based on: https://jhartshorne.co.uk/posts/back-to-top/ #}
const topButton = document.querySelector(".top-btn"); const topButton = document.querySelector(".top-btn");
const scrollOffset = 400;
window.onscroll = () => { window.onscroll = () => {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { if (document.body.scrollTop > scrollOffset || document.documentElement.scrollTop > scrollOffset) {
topButton.classList.remove("hidden"); topButton.classList.remove("hidden");
} else { } else {
topButton.classList.add("hidden"); topButton.classList.add("hidden");
} }
} };
const scrollOptions = {
top: 0,
left: 0,
behavior: 'smooth'
};
const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;
topButton.addEventListener('click', () => { topButton.addEventListener('click', () => {
window.scrollTo({ supportsNativeSmoothScroll ? window.scrollTo(scrollOptions) : window.scrollTo(scrollOptions.left, scrollOptions.top);
top: 0,
left: 0,
});
}); });
</script> </script>