Fix scroll-to-top button

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

layouts/_default/single.html

@@ -33,8 +33,6 @@
 {{ 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">
@@ -79,6 +77,8 @@
       </div>
     </div>
   </div>
+  <!--scroll back to top-->
+  <a id="scroll-to-top" class="btn"><i class="fas fa-chevron-circle-up"></i></a>
   {{ if .IsTranslated }}
     {{ partial "navigators/floating-lang-selector.html" . }}
   {{ end }}

layouts/partials/arrow.html

@@ -1,5 +0,0 @@
-<!--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>

layouts/partials/head.html

@@ -1,2 +0,0 @@
-<!--back to top-->
-<span id="top"></span>

static/css/layouts/single.css

@@ -313,6 +313,31 @@ mark {
   display: none;
 }
 
+
+#scroll-to-top{
+  position: fixed;
+  bottom: 0rem;
+  right: 1rem;
+  color:#248aaa;
+  font-size: 24pt;
+  z-index: 900000;
+  visibility: hidden;
+}
+
+#scroll-to-top i{
+  box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+  background-color: #f9f9f9;
+  border-radius: 50%;
+}
+
+#scroll-to-top:hover{
+  color: #2098d1;
+}
+
+#scroll-to-top.show{
+  visibility: visible;
+}
+
 /* ============= Device specific fixes ======= */
 
 /* Large screens such as TV */
@@ -419,6 +444,9 @@ mark {
 /* Medium devices (tablets, 768px and up) */
 
 @media only screen and (max-width: 768px) {
+  #scroll-to-top{
+    right: 8rem;
+  }
 }
 
 /* Small devices (landscape phones, 576px and up) */

static/css/style.css

@@ -44,14 +44,3 @@
 /* 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;
-}

static/js/single.js

@@ -59,5 +59,23 @@ var isMobile = false, isTablet = false, isLaptop = false;
       elems[i].classList.add("nav-link");
     }
 
+    // add scroll to top button
+    function scrollToTop() {
+      var btn = $('#scroll-to-top');
+      $(window).scroll(function () {
+        if ($(window).scrollTop() > 300) {
+          btn.addClass('show');
+        } else {
+          btn.removeClass('show');
+        }
+      });
+
+      btn.on('click', function (e) {
+        e.preventDefault();
+        $('html, body').animate({ scrollTop: 0 }, '300');
+      });
+    }
+    scrollToTop();
+
   });
 })(jQuery);