Harden scroll-to-top button behavior

Author: ankitkr104

_includes/footer.html

@@ -1,5 +1,5 @@
 {% assign t = site.data.locales[page.lang][page.lang] %}
-<button id="scrollToTopButton" title="Go to top" aria-label="Scroll to top">
+<button id="scrollToTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">
   <svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
     <path d="M12 4L5 11h4v9h6v-9h4z"></path>
   </svg>

assets/css/button.scss

@@ -26,5 +26,5 @@
     width: 20px;
     height: 26px;
     display: block;
-    fill: #6a737d;
+    fill: currentColor;
 }

assets/js/button.js

@@ -1,14 +1,21 @@
 
-window.addEventListener('scroll', function () {
-    var scrollToTopButton = document.getElementById('scrollToTopButton');
-    if (window.scrollY > 300) {
-        scrollToTopButton.style.display = 'flex';
-    } else {
-        scrollToTopButton.style.display = 'none';
-    }
-});
-
-document.getElementById('scrollToTopButton').addEventListener('click', function () {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-});
+var scrollToTopButton = document.getElementById('scrollToTopButton');
+
+if (scrollToTopButton) {
+    var toggleScrollToTopButton = function () {
+        if (window.scrollY > 300) {
+            scrollToTopButton.style.display = 'flex';
+        } else {
+            scrollToTopButton.style.display = 'none';
+        }
+    };
+
+    window.addEventListener('scroll', toggleScrollToTopButton);
+
+    scrollToTopButton.addEventListener('click', function () {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+
+    toggleScrollToTopButton();
+}