add back to top button #3

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

archetypes/default.md

@@ -4,6 +4,7 @@ date = {{ .Date }}
 tags = [""]
 draft = false
 toc = false
+backtotop = false
 +++
 
 # Title

layouts/_default/baseof.html

@@ -9,4 +9,5 @@
     {{ partial "footer.html" . }}
   </body>
   {{ partial "darkmode.html" . }}
+  {{ partial "backtotop.html" . }}
 </html>

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 }}

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>

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;