Add scroll to top button

5 files changed, 24 insertions, 15 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 506127b..49e70df 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -30,7 +30,9 @@
             {{ partial "sidebar.html" . }}
         </div>
         <div id="container-progress">
-            <div id="progress"></div>
+            <a href="javascript:void(0)">
+                <div id="progress"></div>
+            </a>
         </div>
     </div>
 </main>
diff --git a/layouts/index.html b/layouts/index.html
index 158c982..ddc93f1 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -32,7 +32,9 @@
             {{ partial "sidebar.html" . }}
         </div>
         <div id="container-progress">
-            <div id="progress"></div>
+            <a href="javascript:void(0)">
+                <div id="progress"></div>
+            </a>
         </div>
     </div>
 </main>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 31dd791..9b2c461 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -2,7 +2,7 @@
     <div class="container-lg text-center">
         <p>
             &copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> |
-            Powered by <a href="https://gohugo.io/" target="_blank">Hugo {{ hugo.Version }}</a>
+            Powered by <a href="https://gohugo.io/" target="_blank">Hugo</a>
             & <a href="https://github.com/amzrk2/hugo-theme-fuji/" target="_blank">Fuji</a>
         </p>
     </div>
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index c5efc63..de2e018 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,22 +1,17 @@
+{{ if .Site.Params.scrollTop }}
 <script>
     $(function () {
         var bar = new ProgressBar.Circle('#progress', {
             color: '#8AA2D3',
-            strokeWidth: 15,
+            strokeWidth: 12,
             trailColor: '#E5E2E4',
-            trailWidth: 15,
+            trailWidth: 12,
             text: {
-                autoStyleContainer: false
+                value: '<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"></path></svg>',
+                autoStyleContainer: false,
+                style: null
             },
             fill: '#E5E2E4',
-            step: function (state, circle) {
-                var value = Math.round(circle.value() * 100);
-                if (value == 0 || value == 100) {
-                    circle.setText('');
-                } else {
-                    circle.setText(value);
-                }
-            }
         });
         var scrolled = ($(window).scrollTop() / ($(document).height() - $(window).height() - 1));
         bar.animate(scrolled);
@@ -30,7 +25,15 @@
             bar.set(scrolled);
         });
     });
+    $('#container-progress').click(function () {
+        $('html, body').animate({
+            scrollTop: 0
+        }, 'slow');
+        return false;
+    });
 </script>
+{{ end }}
+<!-- Vanilla LazyLoad -->
 <script>
     var lazyLoadInstance = new LazyLoad({
         elements_selector: ".lazy"
diff --git a/layouts/tags/list.html b/layouts/tags/list.html
index 30cca51..0b58a6d 100644
--- a/layouts/tags/list.html
+++ b/layouts/tags/list.html
@@ -38,7 +38,9 @@
             {{ partial "sidebar.html" . }}
         </div>
         <div id="container-progress">
-            <div id="progress"></div>
+            <a href="javascript:void(0)">
+                <div id="progress"></div>
+            </a>
         </div>
     </div>
 </main>