From e7b34b5e1dac666866660436bb0fa80e1bef6079 Mon Sep 17 00:00:00 2001
From: Ray <Chow-Ray@outlook.com>
Date: Wed, 6 Jan 2021 23:23:09 +0800
Subject: [PATCH] Add one-click return to the top function on the article page

Signed-off-by: Ray <Chow-Ray@outlook.com>
---
 layouts/_default/single.html |  2 ++
 layouts/partials/arrow.html  |  5 +++++
 layouts/partials/head.html   |  2 ++
 static/css/style.css         | 11 +++++++++++
 4 files changed, 20 insertions(+)
 create mode 100644 layouts/partials/arrow.html
 create mode 100644 layouts/partials/head.html

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index a83c6b3..2215bf4 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -31,6 +31,8 @@
 {{ end }}
 
 {{ define "content" }}
+<!--back to top-->
+<a href="#top" class="backtop">{{ partial "arrow.html" . }}</a>
 <section class="content-section" id="content-section">
   <div class="content">
     <div class="container p-0 read-area">
diff --git a/layouts/partials/arrow.html b/layouts/partials/arrow.html
new file mode 100644
index 0000000..ad73f2c
--- /dev/null
+++ b/layouts/partials/arrow.html
@@ -0,0 +1,5 @@
+<!--Back to top-->
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-circle-up" class="svg-inline--fa fa-chevron-circle-up fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm231-113.9L103.5 277.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4 33.9 0L256 226.9l101.6 101.6c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L273 142.1c-9.4-9.4-24.6-9.4-34 0z">
+    </path>
+</svg>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
new file mode 100644
index 0000000..3f794ea
--- /dev/null
+++ b/layouts/partials/head.html
@@ -0,0 +1,2 @@
+<!--back to top-->
+<span id="top"></span>
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 3776d67..daa421c 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -44,3 +44,14 @@
 /* iPhone 5 or before */
 @media only screen and (max-width: 320px) {
 }
+
+/* Back to top */
+.backtop {
+    color: #b3b1b1;
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    width: 32px;
+    height: 32px;
+    z-index: 999998;
+}
\ No newline at end of file