refactor: improve JS/HTML for button back2top (cotes2020#1054)

cotes2020 · web-flow · commit f6bf6d086400 · 2023-05-20T01:07:18.000+08:00
The current "back to top" button is built by `&lt;a&gt;` tag, it would be more appropriate to replace it with the `&lt;button&gt;` tag.
diff --git a/_javascript/modules/components/back-to-top.js b/_javascript/modules/components/back-to-top.js
@@ -3,15 +3,18 @@
  */
 
 export function back2top() {
-  $(window).on('scroll', () => {
-    if ($(window).scrollTop() > 50) {
-      $('#back-to-top').fadeIn();
+  const $window = $(window);
+  const $btn = $('#back-to-top');
+
+  $window.on('scroll', () => {
+    if ($window.scrollTop() > 50) {
+      $btn.fadeIn();
     } else {
-      $('#back-to-top').fadeOut();
+      $btn.fadeOut();
     }
   });
 
-  $('#back-to-top').on('click', () => {
-    window.scrollTo(0, 0);
+  $btn.on('click', () => {
+    $window.scrollTop(0);
   });
 }
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -34,9 +34,9 @@
 
     <div id="mask"></div>
 
-    <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
+    <button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
       <i class="fas fa-angle-up"></i>
-    </a>
+    </button>
 
     {% if site.pwa.enabled %}
       <div
