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:
parent
1a4ccfaefe
commit
f7c62f5962
|
@ -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 {
|
||||||
|
|
|
@ -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");
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
topButton.addEventListener('click', () => {
|
const scrollOptions = {
|
||||||
window.scrollTo({
|
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
});
|
behavior: 'smooth'
|
||||||
|
};
|
||||||
|
const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;
|
||||||
|
|
||||||
|
topButton.addEventListener('click', () => {
|
||||||
|
supportsNativeSmoothScroll ? window.scrollTo(scrollOptions) : window.scrollTo(scrollOptions.left, scrollOptions.top);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
Loading…
Reference in New Issue