Created scrollTop feature

themes/coders-tokyo/layout/_partial/footer.ejs

@@ -34,7 +34,8 @@
               </a>
             </li>
             <li>
-              <a href="https://www.youtube.com/watch?v=zIjRONNA_8Y&list=PLkY6Xj8Sg8-uPZnTdScfuH0xD-O6Kb-V-" target="_blank">
+              <a href="https://www.youtube.com/watch?v=zIjRONNA_8Y&list=PLkY6Xj8Sg8-uPZnTdScfuH0xD-O6Kb-V-"
+                target="_blank">
                 <i class="socicon socicon-youtube icon icon--xs"></i>
               </a>
             </li>
@@ -61,17 +62,35 @@
     </div>
     <!--end of row-->
   </div>
+  <div id="scrollTop" class="scrollTop">
+    <img src="/images/up-arrow.svg" />
+  </div>
   <!--end of container-->
 </footer>
 
 <%- js('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js') %>
 <%- js('https://cdnjs.cloudflare.com/ajax/libs/flickity/2.1.1/flickity.pkgd.min.js') %>
 <%- js('https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/14.2.1/smooth-scroll.min.js') %>
 <%- js('js/scripts.js') %>
-<script src="https://embed.small.chat/TAKF2JHMFGAY8GG7K5.js" async></script>
 
 <script>
   var scroll = new SmoothScroll('a[href*="#"]');
+  var scrollTopEl = document.querySelector("#scrollTop");
+  scrollTopEl.addEventListener("click", () => {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+  });
+  window.onscroll = onScroll;
+  function onScroll() {
+    if (
+      document.body.scrollTop > 30 ||
+      document.documentElement.scrollTop > 30
+    ) {
+      scrollTopEl.classList.add("showScroll");
+    } else {
+      scrollTopEl.classList.remove("showScroll");
+    }
+  }
 </script>
 
 <!-- <footer id="footer">
@@ -84,4 +103,4 @@
       <%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a>
     </div>
   </div>
-</footer> -->
+</footer> -->

themes/coders-tokyo/source/css/theme.css

@@ -62,6 +62,7 @@ a {
 /**! 02. Typography **/
 html {
   font-size: 87.5%;
+  scroll-behavior: smooth;
 }
 @media all and (max-width: 768px) {
   html {
@@ -9342,3 +9343,21 @@ footer.footer-7 {
     margin-right: auto;
   }
 }
+.scrollTop {
+  position: fixed;
+  bottom: 0;
+  width: 40px;
+  right: 0;
+  margin: 1.5rem;
+  transform: translateY(200%);
+  transition: all 600ms ease-in;
+  opacity: 0;
+  cursor: pointer;
+}
+.scrollTop img {
+  width: 100%;
+}
+.showScroll {
+  transform: translateY(0);
+  opacity: 1;
+}