From f6bf6d0864007a44f18e6b20cb9b3aca622ee51d Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 20 May 2023 01:07:18 +0800
Subject: [PATCH] refactor: improve JS/HTML for button back2top (#1054)

The current "back to top" button is built by `<a>` tag, it would be more appropriate to replace it with the `<button>` tag.
---
 _javascript/modules/components/back-to-top.js | 15 +++++++++------
 _layouts/default.html                         |  4 ++--
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/_javascript/modules/components/back-to-top.js b/_javascript/modules/components/back-to-top.js
index 6088d76..777a659 100644
--- 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
index bc434d6..634701c 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -34,9 +34,9 @@ layout: compress
 
     <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