💄 Add tool button click events make it more silky.

assets/js/next-boot.js

@@ -10,6 +10,7 @@ NexT.boot.registerEvents = function() {
 
   NexT.utils.registerScrollPercent();
   // NexT.utils.registerCanIUseTag();
+  NexT.utils.registerToolButtons();
 
   // Mobile top menu bar.
   document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => {

assets/js/utils.js

@@ -23,6 +23,28 @@ HTMLElement.prototype.wrap = function(wrapper) {
 
 NexT.utils = {
 
+  registerToolButtons: function() {
+    const comms_offset = document.getElementById('comments').getBoundingClientRect().top + window.scrollY;
+    document.getElementById('goto-comments').addEventListener('click', () => {
+       window.anime({
+        targets  : document.scrollingElement,
+        duration : 500,
+        easing   : 'linear',
+        scrollTop: comms_offset
+      });
+    });
+    
+    const gt_offset = document.getElementById('google_translate_element').getBoundingClientRect().top + window.scrollY;
+    document.getElementById('goto-gt').addEventListener('click', () => {
+       window.anime({
+        targets  : document.scrollingElement,
+        duration : 500,
+        easing   : 'linear',
+        scrollTop: gt_offset
+      });
+    });
+  },
+
   regSwitchThemeBtn: function() {
     const switchThemeBtn = document.getElementById('switch-theme');
     if (!switchThemeBtn) return;

layouts/partials/widgets.html

@@ -1,14 +1,14 @@
 <div class="tool-buttons" >
-  <a id="goto-comments" class="button goto-comments" href="#comments"  title="{{ T "ToolBtns.comment" }}">
+  <div id="goto-comments" class="button goto-comments" title="{{ T "ToolBtns.comment" }}">
     <i class="fas fa-comments"></i>
-  </a> 
+  </div> 
   <div id="switch-theme" class="button" title="{{ T "ToolBtns.theme" }}">
     <i class="fas fa-adjust"></i>
   </div> 
   {{ if .Site.Params.footer.translate }}
-  <a class="button" href="#google_translate_element"  title="{{ T "ToolBtns.lang" }}">
+  <div id="goto-gt" class="button"  title="{{ T "ToolBtns.lang" }}">
     <i class="fas fa-globe"></i>
-  </a> 
+  </div> 
   {{ end }}
   {{- if and .Site.Params.backTop.enable (not .Site.Params.backTop.sidebar) }}
   <div class="back-to-top" role="button" title="{{ T "ToolBtns.backTop" }}">