🚑 Fixed the tool buttons click event.

assets/css/_common/components/tool-buttons.scss

@@ -4,7 +4,6 @@
   background: none;
   bottom: 55px;
   filter: alpha(opacity=0);
-  font-size: 12px;
 
   .button {
     display: block;
@@ -25,6 +24,14 @@
     opacity: $tool-btn-opacity;
     touch-action: manipulation;
 
+    @include mobile() {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      border-radius: 3px;
+      font-size: $font-size-small;
+    }
+
     &:hover {
       color: $tool-btn-hover-fore-color;
       opacity: $tool-btn-opacity-hover;
@@ -42,7 +49,10 @@
 
 @if $back2top_enable {
   .back-to-top {
+    font-size: $font-size-small;
+    @include mobile() {
       font-size: $font-size-smaller;
+    }
 
     @if not $back2top_scrollpercent {
       span {

assets/css/_variables/base.scss

@@ -296,7 +296,7 @@ $b2t-opacity-hover            : 1;
 $b2t-position-bottom          : -100px;
 $b2t-position-bottom-on       : 19px;
 $b2t-position-right           : 30px;
-$b2t-position-right-mobile    : 20px;
+$b2t-position-right-mobile    : 16px;
 $b2t-font-size                : 12px;
 $b2t-color                    : white;
 $b2t-bg-color                 : $black-deep;

assets/js/utils.js

@@ -24,23 +24,24 @@ HTMLElement.prototype.wrap = function(wrapper) {
 NexT.utils = {
 
   registerToolButtons: function () {
-    document.getElementById('goto-comments').addEventListener('click', () => {
+    const buttons = document.querySelectorAll('.tool-buttons div:nth-child(n+2)');
+    buttons.forEach(button => {
+      let targetId = button.id;
+      if (targetId != '') {
+        targetId = targetId.substring(5);
+      }
+      button.addEventListener('click', () => {
+        NexT.utils.slidScrollBarAnime(targetId);
+      });
+    });
+  },
+
+  slidScrollBarAnime: function (targetId, easing = 'linear', duration = 500) {
     window.anime({
       targets: document.scrollingElement,
-        duration : 500,
+      duration: duration,
-        easing   : 'linear',
+      easing: easing,
-        scrollTop: document.getElementById('comments').getBoundingClientRect().top + window.scrollY
+      scrollTop: targetId == '' ? 0 : document.getElementById(targetId).getBoundingClientRect().top + window.scrollY
-      });
-    });
-    
-
-    document.getElementById('goto-gt').addEventListener('click', () => {
-       window.anime({
-        targets  : document.scrollingElement,
-        duration : 500,
-        easing   : 'linear',
-        scrollTop: document.getElementById('google_translate_element').getBoundingClientRect().top + window.scrollY
-      });
     });
   },
 
@@ -55,7 +56,6 @@ NexT.utils = {
   },
 
   activeThemeMode: function () {
-
     const useDark = window.matchMedia("(prefers-color-scheme: dark)");
     let darkModeState = NexT.CONFIG.darkmode || useDark.matches;
     const localState = NexT.utils.getLocalStorage('theme');
@@ -278,19 +278,6 @@ NexT.utils = {
     return res_src;
   },
 
- /* replacePostCRLink: function() {
-    if (NexT.CONFIG.hostname.startsWith('http')) return;
-    // Try to support mutli domain without base URL sets.
-    let href = window.location.href;
-    if (href.indexOf('#')>-1){
-      href = href.split('#')[0];
-    }
-    let postLink = document.getElementById('post-cr-link');
-    if (!postLink) return;
-    postLink.text = href;
-    postLink.href = href;
-  },*/
-
   /**
    * One-click copy code support.
    */
@@ -400,15 +387,6 @@ NexT.utils = {
       }
       this.activateNavByIndex(index);
     }, { passive: true });
-
-    backToTop && backToTop.addEventListener('click', () => {
-      window.anime({
-        targets  : document.scrollingElement,
-        duration : 500,
-        easing   : 'linear',
-        scrollTop: 0
-      });
-    });
   },
 
   /**

layouts/partials/footer.html

@@ -1,6 +1,6 @@
 {{- $ft := .Site.Params.footer }}
 {{ if $ft.translate }}
-<div class="google-translate">
+<div id="gtranslate" class="google-translate">
   <i class="fa fa-language"></i>
   <div id="google_translate_element"></div>
 </div>

layouts/partials/widgets.html

@@ -1,12 +1,12 @@
 <div class="tool-buttons" > 
-  <div id="goto-comments" class="button goto-comments" title="{{ T "ToolBtns.comment" }}">
-    <i class="fas fa-comments"></i>
-  </div> 
   <div id="switch-theme" class="button" title="{{ T "ToolBtns.theme" }}">
     <i class="fas fa-adjust"></i>
   </div>
+  <div id="goto-comments" class="button goto-comments" title="{{ T "ToolBtns.comment" }}">
+    <i class="fas fa-comments"></i>
+  </div> 
   {{ if .Site.Params.footer.translate }}
-  <div id="goto-gt" class="button"  title="{{ T "ToolBtns.lang" }}">
+  <div id="goto-gtranslate" class="button"  title="{{ T "ToolBtns.lang" }}">
     <i class="fas fa-globe"></i>
   </div> 
   {{ end }}