Merge pull request #318 from viosey/feat/back-to-top

feat(back-to-top): update back-to-top IXD
iblh · Apr 26, 2017 · 041614d · 041614d
2 parents a99d713 + 1d121f6
commit 041614d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 10 deletions.
diff --git a/layout/_partial/footer_top.ejs b/layout/_partial/footer_top.ejs
@@ -1,4 +1,4 @@
-<div class="toTop-wrap">
+<div id="back-to-top" class="toTop-wrap">
     <a href="#top" class="toTop">
         <i class="material-icons footer_top-i">expand_less</i>
     </a>

diff --git a/source/css/style.css b/source/css/style.css
@@ -2425,16 +2425,31 @@ a {
 /* Footer_Top */
 /**************/
 
-.toTop-wrap {
+#back-to-top{
+    display: block;
+    position: fixed;
+    bottom: 24px;
+    right: -41px;
+    transition: background-color .18s cubic-bezier(.6,0,.1,1),box-shadow .18s cubic-bezier(.6,0,.1,1),transform .18s cubic-bezier(.6,0,.1,1);
+    z-index: 8;
+}
+#back-to-top.btt-visible{
+    transform: translate(-64px, 0);
+}
+#back-to-top.btt-docked{
     position: absolute;
     bottom: 100px;
-    right: 34.61px;
-    z-index: 8
 }
 @media screen and (max-width: 840px) {
-    .toTop-wrap {
+    #back-to-top{
+        bottom: 24px;
+    }
+    #back-to-top.btt-visible{
+        transform: translate(-60px, 0);
+    }
+    #back-to-top.btt-docked{
+        position: absolute;
         bottom: 180px;
-        right: 28px
     }
 }
 .toTop {

diff --git a/source/css/style.min.css b/source/css/style.min.css
diff --git a/source/js/js.js b/source/js/js.js
@@ -2,7 +2,7 @@
 /*global $, jQuery, alert*/
 
 // Custom_js
-// Active_Toc_js
+// Back_to_top_js
 // Material_js
 // Bootstrap_js
 // Sidebar_js
@@ -92,10 +92,26 @@ $(document).ready(function() {
 
 //**********************************
 //**********************************
-//**********************************   Active_Toc_js
+//**********************************   Back_to_top_js
 //**********************************
 //**********************************
 
+$(window).scroll(function (event) {
+    var scroll = $(window).scrollTop();
+	if (scroll > 300) {
+		$('#back-to-top').addClass('btt-visible');
+	} else {
+		$('#back-to-top').removeClass('btt-visible');
+	}
+
+	var footerOffset = $('.mdl-mini-footer').offset().top;
+	var windowHeight = $( window ).height();
+	if (scroll > footerOffset - windowHeight + 42) {
+		$('#back-to-top').addClass('btt-docked');
+	} else {
+		$('#back-to-top').removeClass('btt-docked');
+	}
+});
 
 //**********************************
 //**********************************

diff --git a/source/js/js.min.js b/source/js/js.min.js