Added a back-to-top button on all pages

The new back-to-top button will show after scrolling a short distance down a long page.
Closes #44.

diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
index 00c5f13c2103a67f51923a654c12be5cdff008f5..a61299d215f9cb445d92286d549b86012b80ed59 100644 (file)
--- a/resources/assets/js/global.js
+++ b/resources/assets/js/global.js
@@ -83,6 +83,29 @@ $(function () {
         $(this).closest('.chapter').find('.inset-list').slideToggle(180);
     });
 
+    // Back to top button
+    $('#back-to-top').click(function() {
+         $('#header').smoothScrollTo();
+    });
+    var scrollTopShowing = false;
+    var scrollTop = document.getElementById('back-to-top');
+    var scrollTopBreakpoint = 1200;
+    window.addEventListener('scroll', function() {
+        if (!scrollTopShowing && document.body.scrollTop > scrollTopBreakpoint) {
+            scrollTop.style.display = 'block';
+            scrollTopShowing = true;
+            setTimeout(() => {
+                scrollTop.style.opacity = 1;
+            }, 1);
+        } else if (scrollTopShowing && document.body.scrollTop < scrollTopBreakpoint) {
+            scrollTop.style.opacity = 0;
+            scrollTopShowing = false;
+            setTimeout(() => {
+                scrollTop.style.display = 'none';
+            }, 500);
+        }
+    });
+
 });
 
 

diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index c419c08b6e31c53c91423aa53ac2885632e3aede..b81e43296204f17fc5463e5bdf20e985881f9b18 100644 (file)
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -126,4 +126,42 @@ $loadingSize: 10px;
   i {
     padding-right: $-s;
   }
+}
+
+// Back to top link
+$btt-size: 40px;
+#back-to-top {
+  background-color: rgba($primary, 0.4);
+  position: fixed;
+  bottom: $-m;
+  right: $-m;
+  padding: $-xs $-s;
+  cursor: pointer;
+  color: #FFF;
+  width: $btt-size;
+  height: $btt-size;
+  border-radius: $btt-size;
+  transition: all ease-in-out 180ms;
+  opacity: 0;
+  z-index: 999;
+  &:hover {
+    width: $btt-size*3.4;
+    background-color: rgba($primary, 1);
+    span {
+      display: inline-block;
+    }
+  }
+  .inner {
+    width: $btt-size*3.4;
+  }
+  i {
+    margin: 0;
+    font-size: 28px;
+    padding: 0 $-s 0 0;
+  }
+  span {
+    line-height: 12px;
+    position: relative;
+    top: -5px;
+  }
 }
\ No newline at end of file

diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index a2979f858a188e62d9a0afda25e77f0028db7902..2dfa7ddfd8ed07e3341487ad4d49e3c4044e8f54 100644 (file)
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -77,6 +77,11 @@
         @yield('content')
     </section>
 
+    <div id="back-to-top">
+        <div class="inner">
+            <i class="zmdi zmdi-chevron-up"></i> <span>Back to top</span>
+        </div>
+    </div>
 @yield('bottom')
 <script src="{{ versioned_asset('js/common.js') }}"></script>
 @yield('scripts')