From d1bed05843b7ac2919a704c3efa69d97da676c69 Mon Sep 17 00:00:00 2001
From: Remy Sheppard <me@remysheppard.com>
Date: Sun, 1 Oct 2023 05:06:28 -0400
Subject: [PATCH] feat: Back To Top (#105)

* Scroll to top

* Update scripts.html

---------

Co-authored-by: Xin <xin@imfing.com>
---
 assets/js/back-to-top.js      | 18 ++++++++++++++++++
 i18n/en.yaml                  |  2 ++
 layouts/partials/scripts.html |  3 ++-
 layouts/partials/toc.html     | 10 ++++++++++
 4 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/back-to-top.js

diff --git a/assets/js/back-to-top.js b/assets/js/back-to-top.js
new file mode 100644
index 00000000..c7996e74
--- /dev/null
+++ 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
index df31eafc..d4d7d62a 100644
--- 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
index 28cc7939..1d567b11 100644
--- 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
index bb3759dd..f7955671 100644
--- 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 -}}