♻️ Refactor: back to top and scroll to comments

CHANGELOG.md

@@ -18,6 +18,7 @@ All notable changes to this project will be documented in this file.
 - :zap: Perf: remove extra spaces in plugin link
 - :wheelchair: Feat(accessibility): use `aria-hidden=true` on icons that AT should ignore
 - :recycle: Refactor: image rendering
+- :recycle: Refactor: back to top and scroll to comments
 - :bug: Fix: add function `dos2unix` to unify new lines symbol between Windows and Unix/Mac OS
 - :bug: Fix: author display error in post and markdown file
 - :bug: Fix: use data attributes or class replace for custom attributes

assets/css/_core/_media.scss

@@ -163,7 +163,7 @@
   .post-info-share,
   .post-info-more section:last-child,
   .post-nav,
-  #fixed-buttons,
+  .fixed-buttons,
   #comments,
   .github-corner {
     display: none !important;

assets/css/_partial/_widgets/_fixed-button.scss

@@ -1,9 +1,4 @@
-#fixed-buttons {
-  display: none;
-}
-
 .fixed-button {
-  display: none;
   z-index: 100;
   position: fixed;
   right: 1.5rem;
@@ -40,11 +35,10 @@
   }
 }
 
-#back-to-top {
-  display: block;
+.back-to-top {
   bottom: 1.5rem;
 }
 
-#view-comments {
+.view-comments {
   bottom: 4.5rem;
 }

layouts/partials/widgets.html

@@ -1,14 +1,13 @@
 <div class="widgets">
-  <div id="fixed-buttons">
+  <div class="fixed-buttons d-none">
     {{- /* top button */ -}}
-    <a href="#" id="back-to-top" class="fixed-button" title="{{ T `backToTop` }}">
+    <div class="fixed-button back-to-top" title="{{ T `backToTop` }}">
       {{- dict "Class" "fa-solid fa-arrow-up fa-fw" | partial "plugin/icon.html" -}}
-    </a>
-
+    </div>
     {{- /* comment button */ -}}
-    <a href="#" id="view-comments" class="fixed-button" title="{{ T `viewComments` }}">
+    <div class="fixed-button view-comments d-none" title="{{ T `viewComments` }}">
       {{- dict "Class" "fa-solid fa-comment fa-fw" | partial "plugin/icon.html" -}}
-    </a>
+    </div>
   </div>
 
   {{- /* GitHub Corners */ -}}

src/js/theme.js

@@ -29,11 +29,11 @@ class Util {
     !Array.isArray(animation) && (animation = [animation]);
     element.classList.add('animate__animated', ...animation);
     const handler = () => {
-      element.classList.remove('animate__animated', ...animation);
+      !reserved && element.classList.remove('animate__animated', ...animation);
       element.removeEventListener('animationend', handler);
       typeof callback === 'function' && callback();
     };
-    !reserved && element.addEventListener('animationend', handler, false);
+    element.addEventListener('animationend', handler, false);
   }
   
   /**
@@ -44,6 +44,16 @@ class Util {
   isValidDate(date) {
     return date instanceof Date && !isNaN(date.getTime());
   }
+  
+  /**
+   * scroll some element into view
+   * @param {String} element element to scroll
+   */
+  scrollIntoView(selector) {
+    document.querySelector(selector).scrollIntoView({
+      behavior: 'smooth'
+    });
+  }
 }
 
 class FixIt {
@@ -1001,12 +1011,17 @@ class FixIt {
     if (document.body.getAttribute('data-header-mobile') === 'auto') {
       $headers.push(document.getElementById('header-mobile'));
     }
-    if (document.getElementById('comments')) {
-      const $viewComments = document.getElementById('view-comments');
-      $viewComments.href = `#comments`;
-      $viewComments.style.display = 'block';
+    if (document.querySelector('#comments')) {
+      const $viewCommentsBtn = document.querySelector('.view-comments');
+      $viewCommentsBtn.classList.remove('d-none');
+      $viewCommentsBtn.addEventListener('click', () => {
+        this.util.scrollIntoView('#comments');
+      });
     }
-    const $fixedButtons = document.getElementById('fixed-buttons');
+    document.querySelector('.back-to-top').addEventListener('click', () => {
+      this.util.scrollIntoView('body');
+    });
+    const $fixedButtons = document.querySelector('.fixed-buttons');
     const ACCURACY = 20, MINIMUM = 100;
     window.addEventListener('scroll', (event) => {
       if (this.disableScrollEvent) {
@@ -1032,18 +1047,21 @@ class FixIt {
       if (this.newScrollTop > MINIMUM) {
         if (isMobile && scroll > ACCURACY) {
           $fixedButtons.classList.remove('animate__fadeIn');
-          this.util.animateCSS($fixedButtons, ['animate__fadeOut', 'animate__faster'], true);
+          this.util.animateCSS($fixedButtons, ['animate__fadeOut', 'animate__faster'], true, () => {
+            $fixedButtons.classList.contains('animate__fadeOut') && $fixedButtons.classList.add('d-none');
+          });
         } else if (!isMobile || scroll < -ACCURACY) {
-          $fixedButtons.style.display = 'block';
+          $fixedButtons.classList.remove('d-none');
           $fixedButtons.classList.remove('animate__fadeOut');
           this.util.animateCSS($fixedButtons, ['animate__fadeIn', 'animate__faster'], true);
         }
       } else {
         if (!isMobile) {
           $fixedButtons.classList.remove('animate__fadeIn');
-          this.util.animateCSS($fixedButtons, ['animate__fadeOut', 'animate__faster'], true);
+          this.util.animateCSS($fixedButtons, ['animate__fadeOut', 'animate__faster'], true, () => {
+            $fixedButtons.classList.contains('animate__fadeOut') && $fixedButtons.classList.add('d-none');
+          });
         }
-        $fixedButtons.style.display = 'none';
       }
       for (let event of this.scrollEventSet) {
         event();