Refactor top-link visibility and positioning in footer

- Update CSS for top-link to use rem units
- Modify HTML to include 'hidden' class for initial state
- Adjust JavaScript to toggle visibility using class
This commit is contained in:
Aditya Telange
2026-04-11 19:19:49 +05:30
parent e8b88d4e72
commit 31185b01d5
2 changed files with 15 additions and 13 deletions
+6 -8
View File
@@ -23,9 +23,9 @@
{{- end }}
{{- if (not site.Params.disableScrollToTop) }}
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-up">
<a href="#top" id="top-link" class="top-link hidden" aria-label="go to top" title="Go to Top (Alt + G)" accesskey="g">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-up">
<polyline points="17 11 12 6 7 11"></polyline>
<polyline points="17 18 12 13 7 18"></polyline>
</svg>
@@ -71,14 +71,12 @@
{{- if (not site.Params.disableScrollToTop) }}
<script>
var mybutton = document.getElementById("top-link");
var toplink = document.getElementById("top-link");
window.onscroll = function () {
if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
mybutton.style.visibility = "visible";
mybutton.style.opacity = "1";
toplink.classList.remove("hidden");
} else {
mybutton.style.visibility = "hidden";
mybutton.style.opacity = "0";
toplink.classList.add("hidden");
}
};