Improve scroll-to-top button styling and behavior

Author: ankitkr104

_includes/footer.html

@@ -1,5 +1,9 @@
 {% assign t = site.data.locales[page.lang][page.lang] %}
-<button id="scrollToTopButton" title="Go to top">Scroll to Top</button>
+<button id="scrollToTopButton" title="Go 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>
+</button>
 <footer class="bg-white border-top text-center pt-5">
   <div class="container-lg p-responsive mx-auto">
 

assets/css/button.scss

@@ -4,11 +4,27 @@
     bottom: 20px;
     right: 20px;
     z-index: 99;
-    font-size: 16px;
-    background-color: #333;
-    color: #fff;
-    border: none;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    color: #6a737d;
+    border: 1px solid #d0d7de;
     cursor: pointer;
-    padding: 10px;
-    border-radius: 4px;
-  }
+    border-radius: 50%;
+    box-shadow: 0 2px 6px rgba(27, 31, 35, 0.12);
+}
+
+#scrollToTopButton:hover {
+    background-color: #f6f8fa;
+    border-color: #afb8c1;
+}
+
+#scrollToTopButton svg {
+    width: 20px;
+    height: 26px;
+    display: block;
+    fill: #6a737d;
+}

assets/js/button.js

@@ -2,7 +2,7 @@
 window.addEventListener('scroll', function () {
     var scrollToTopButton = document.getElementById('scrollToTopButton');
     if (window.scrollY > 300) {
-        scrollToTopButton.style.display = 'block';
+        scrollToTopButton.style.display = 'flex';
     } else {
         scrollToTopButton.style.display = 'none';
     }