Add back to top (#213)

* translate_Chinese

* translate_Chinese

* Add one-click return to the top function on the article page

Signed-off-by: Ray <Chow-Ray@outlook.com>

* Fix scroll-to-top button

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

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>

layouts/_default/single.html

@@ -77,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 }}

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/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);