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.
cotes2020 · May 19, 2023 · f6bf6d0 · f6bf6d0
1 parent bef2ac0
commit f6bf6d0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
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