Remove JavaScript for back to top link

This commit is contained in:
Helen Chong 2024-06-13 21:31:42 +08:00
parent e54a91d5c7
commit 2d162398b4
1 changed files with 10 additions and 35 deletions

View File

@ -1,19 +1,14 @@
{% set topLinkTitle = "Back to Top" %} {% set topLinkTitle = "Back to Top" %}
<a href="#top" class="top-btn hidden" title="{{ topLinkTitle }}"> <a href="#top" class="top-btn" title="{{ topLinkTitle }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> {{ topLinkTitle }}
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
<span class="visually-hidden">{{ topLinkTitle }}</span>
</a> </a>
<noscript>
<p><a class="top-link" href="#top">{{ topLinkTitle }}</a></p>
</noscript>
<style> <style>
.top-btn, .top-btn,
.top-btn:hover { .top-btn:hover {
color: var(--clr-top-btn-txt); color: var(--clr-top-btn-txt);
text-decoration: none;
} }
.top-btn { .top-btn {
@ -23,9 +18,11 @@
z-index: 999; z-index: 999;
background-color: var(--clr-top-btn-bg); background-color: var(--clr-top-btn-bg);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50em; border-radius: 50em;
height: 2rem; padding: 0.3em 0.5em;
aspect-ratio: 1 / 1;
} }
.top-btn:focus { .top-btn:focus {
@ -33,8 +30,7 @@
outline-offset: 0.15em; outline-offset: 0.15em;
} }
.top-link::before, .top-btn::before {
.top-link::after {
--arrow-margin: 0.3em; --arrow-margin: 0.3em;
content: ""; content: "";
display: inline-block; display: inline-block;
@ -43,28 +39,7 @@
border-right: 0.4rem solid transparent; border-right: 0.4rem solid transparent;
} }
.top-link::before { .top-btn::before {
margin: 0 var(--arrow-margin) 0 0; margin: 0 var(--arrow-margin) 0 0;
} }
</style>
.top-link::after {
margin: 0 0 0 var(--arrow-margin);
}
</style>
<script defer>
const topButton = document.querySelector(".top-btn");
const scrollOffset = 400;
window.onscroll = () => {
if (document.body.scrollTop > scrollOffset || document.documentElement.scrollTop > scrollOffset) {
topButton.classList.remove("hidden");
} else {
topButton.classList.add("hidden");
}
};
topButton.addEventListener('click', () => {
window.scrollTo({ top: 0, left: 0 });
});
</script>