From 0f2d1a8200a36b3677994b2f4e81fd76df9b16ae Mon Sep 17 00:00:00 2001
From: matsuyoshi <sfbgwm30@gmail.com>
Date: Mon, 16 Mar 2020 22:24:18 +0900
Subject: [PATCH] add back to top button #3

---
 README.md                       |  5 +++++
 archetypes/default.md           |  1 +
 layouts/_default/baseof.html    |  1 +
 layouts/_default/single.html    |  5 +++++
 layouts/partials/backtotop.html | 16 ++++++++++++++++
 static/css/main.css             | 19 +++++++++++++++++++
 6 files changed, 47 insertions(+)
 create mode 100644 layouts/partials/backtotop.html

diff --git a/README.md b/README.md
index 0846a7b..6d58c49 100644
--- a/README.md
+++ b/README.md
@@ -101,6 +101,10 @@ title: "Search"
 
 If you want to use TableOfContent, you need to write words greater than 400, and set `true` frontmatter `toc`.
 
+### Back To Top Button
+
+If you want to use Back To Top Button, you need to write words greater than 400, and set `true` frontmatter `backtotop`.
+
 ## Frontmatter example
 
 ```
@@ -110,6 +114,7 @@ date = 2020-02-15T20:00:00+09:00
 tags = ["tags here"]
 draft = false
 toc = false
+backtotop = false
 +++
 
 # Title
diff --git a/archetypes/default.md b/archetypes/default.md
index 53f55cb..55dad13 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -4,6 +4,7 @@ date = {{ .Date }}
 tags = [""]
 draft = false
 toc = false
+backtotop = false
 +++
 
 # Title
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index edc645e..fa27e90 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -9,4 +9,5 @@
     {{ partial "footer.html" . }}
   </body>
   {{ partial "darkmode.html" . }}
+  {{ partial "backtotop.html" . }}
 </html>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 7760c12..cc8f726 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -11,5 +11,10 @@
         </div>
       {{ end }}
     </article>
+    {{ if and (gt .WordCount 400) (.Param "backtotop") }}
+      <button onclick="topFunction()" id="backtotopButton">
+        <i class="fa fa-angle-up"></i>
+      </button>
+    {{ end }}
   </div>
 {{ end }}
diff --git a/layouts/partials/backtotop.html b/layouts/partials/backtotop.html
new file mode 100644
index 0000000..c18bbb9
--- /dev/null
+++ b/layouts/partials/backtotop.html
@@ -0,0 +1,16 @@
+<script>
+    document.addEventListener('scroll', function() {
+        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
+            document.getElementById('backtotopButton').style.opacity = "1";
+            document.getElementById('backtotopButton').style.transition = "0.5s";
+        } else {
+            document.getElementById('backtotopButton').style.opacity = "0";
+            document.getElementById('backtotopButton').style.transition = "0.5s";
+        }
+    });
+
+    function topFunction() {
+        document.body.scrollTop = 0;            // For Safari
+        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+    }
+</script>
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index a87cbcb..a9f5b1c 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -293,6 +293,25 @@ code {
     border-radius: 4px;
 }
 
+#backtotopButton {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 99;
+  border: none;
+  outline: none;
+  background-color: #eeeeff;
+  cursor: pointer;
+  padding: 15px;
+  border-radius: 10px;
+  font-size: 16px;
+  text-align: center;
+}
+
+#backtotopButton:hover {
+  background-color: #aaaaaa;
+}
+
 .searchBoxContainer {
   position: relative;
   width: 300px;