Correcting error in footer that was overlapping the page

Author: williamcanin

_includes/layout/footer.html

@@ -6,17 +6,14 @@
 
 {%- include layout/data.liquid -%}
 
-<footer class="fixed-bottom footer">
 
-  <!-- line top button  -->
-  {%- if footer_.top_button.enable -%}
-    <div class="row top">
-      <div class="col-md d-flex justify-content-end">
-        <a id="top-link" class="top-link" href="#top">{{ footer_.top_button.icon }}</a>
-      </div>
-    </div>
-  {%- endif -%}
-  <!-- line top button  -->
+{%- if footer_.top_button.enable -%}
+  <a id="top-link" href="#top" class="top-link" aria-label="back to top">
+    {{ footer_.top_button.icon }}
+  </a>
+{%- endif -%}
+
+<footer class="fixed-bottom footer">
 
   <!-- line footer content  -->
   <div class="row footer-wrapper">

_sass/includes/_footer.scss

@@ -1,9 +1,37 @@
+.top-link {
+  position: fixed;
+  color: var(--primary-color);
+  text-decoration: none !important;
+  bottom: var(--margin-bottom);
+  right: 1.2rem;
+  width: 45px;
+  height: 45px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  font-size: 3.5rem;
+  line-height: 1;
+  z-index: 1050; /* acima do conteúdo, abaixo de modals bootstrap */
+  pointer-events: auto; /* permite clique apenas nele */
+  transition: opacity .3s ease, transform .3s ease;
+  opacity: 0;
+  &:hover {
+    color: var(--text-color);
+  }
+}
+
+.top-link.show {
+  display: flex;
+  opacity: 1;
+  transform: translateY(0);
+}
+
 .footer {
   font: 16.34px monospace !important;
   font-size: .75rem !important;
   letter-spacing: normal !important;
   color: var(--text-color);
-  padding: 0px 10px;
+  padding: 0px 15px;
 
   &-wrapper {
     height: 24px;
@@ -12,23 +40,6 @@
     background-color: var(--footer-bg-color);
   }
 
-  .top {
-    background-color: transparent;
-    margin-bottom: 5px;
-    margin-right: 2px;
-
-    @media (max-width: 1040px) {
-      display: none;
-    }
-
-    &-link {
-      font-size: 3rem;
-      display: none;
-      text-decoration: none !important;
-      z-index: 99;
-    }
-  }
-
   &-copyright-wrap {
     text-align: left;
 

assets/js/fallback/default.js

@@ -57,26 +57,21 @@ document.addEventListener("DOMContentLoaded", () => {
   /* Show/disappear top button
   --------------------------------------------------------------------------------------------------
   */
-  let topButton = document.getElementById("top-link");
+  const topButton = document.getElementById("top-link");
   const scrollThreshold = 700;
-  window.onscroll = function () { scrollFunction() };
 
-  function scrollFunction() {
-    if (document.body.scrollTop > scrollThreshold || document.documentElement.scrollTop > scrollThreshold) {
-      topButton.style.display = "block";
+  window.addEventListener("scroll", () => {
+    if (window.scrollY > scrollThreshold) {
+      topButton.classList.add("show");
     } else {
-      topButton.style.display = "none";
+      topButton.classList.remove("show");
     }
-  }
-
-  topButton.addEventListener("click", topFunction);
+  });
 
-  function topFunction() {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    });
-  }
+  topButton.addEventListener("click", (e) => {
+    e.preventDefault();
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  });
 
   /* function Giscus
   --------------------------------------------------------------------------------------------------