feat: Back To Top (#105)

* Scroll to top * Update scripts.html --------- Co-authored-by: Xin <[email protected]>
imfing · Oct 1, 2023 · d1bed05 · d1bed05
1 parent 2df3c56
commit d1bed05
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git a/assets/js/back-to-top.js b/assets/js/back-to-top.js
@@ -0,0 +1,18 @@
+const backToTop = document.querySelector("#backToTop");
+
+document.addEventListener("scroll", (event) => {
+  if (window.scrollY > 300) {
+    backToTop.classList.remove("opacity-0");
+  } else {
+    backToTop.classList.add("opacity-0");
+  }
+});
+
+
+function scrollUp() {
+  window.scroll({
+    top: 0, 
+    left: 0, 
+    behavior: 'smooth'
+  });
+}
diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -2,4 +2,6 @@ onThisPage: "On this page"
 editThisPage: "Edit this page on GitHub →"
 lastUpdated: "Last updated on"
 
+backToTop: "Scroll to top"
+
 copyright: "© 2023 Hextra Project."
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -5,8 +5,9 @@
 {{- $jsCodeCopy := resources.Get "js/code-copy.js" -}}
 {{- $jsFileTree := resources.Get "js/filetree.js" -}}
 {{- $jsSidebar := resources.Get "js/sidebar.js" -}}
+{{- $jsBackToTop := resources.Get "js/back-to-top.js" -}}
 
-{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar | resources.Concat "js/main.js" -}}
+{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}}
 {{- if hugo.IsProduction -}}
   {{- $scripts = $scripts | minify | fingerprint -}}
 {{- end -}}

diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
@@ -3,6 +3,7 @@
 {{- $toc := .Params.toc | default true -}}
 {{- $onThisPage := (T "onThisPage") | default "On this page"}}
 {{- $editThisPage := (T "editThisPage") | default "Edit this page"}}
+{{- $backToTop := (T "backToTop") | default "Scroll to top" -}}
 
 <nav class="hextra-toc order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
   {{- if $toc }}
@@ -29,6 +30,15 @@
           {{- with .Params.editURL -}}{{ $editURL = .Params.editURL }}{{- end -}}
           <a class="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ $editThisPage }}</a>
         {{- end -}}
+        {{/* Scroll To Top */}}
+        <button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="transition-all transition duration-75 opacity-0 text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50">
+          <span>
+            {{- $backToTop -}}
+          </span>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline ml-1 h-3.5 w-3.5 border rounded-full border-gray-500 hover:border-gray-900 dark:border-gray-400 dark:hover:border-gray-100 contrast-more:border-gray-800 contrast-more:dark:border-gray-50">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+          </svg>
+        </button>
       </div>
     </div>
   {{ end -}}