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.
Showing
3 changed files
with
66 additions
and
0 deletions
| ... | @@ -83,6 +83,29 @@ $(function () { | ... | @@ -83,6 +83,29 @@ $(function () { |
| 83 | $(this).closest('.chapter').find('.inset-list').slideToggle(180); | 83 | $(this).closest('.chapter').find('.inset-list').slideToggle(180); |
| 84 | }); | 84 | }); |
| 85 | 85 | ||
| 86 | + // Back to top button | ||
| 87 | + $('#back-to-top').click(function() { | ||
| 88 | + $('#header').smoothScrollTo(); | ||
| 89 | + }); | ||
| 90 | + var scrollTopShowing = false; | ||
| 91 | + var scrollTop = document.getElementById('back-to-top'); | ||
| 92 | + var scrollTopBreakpoint = 1200; | ||
| 93 | + window.addEventListener('scroll', function() { | ||
| 94 | + if (!scrollTopShowing && document.body.scrollTop > scrollTopBreakpoint) { | ||
| 95 | + scrollTop.style.display = 'block'; | ||
| 96 | + scrollTopShowing = true; | ||
| 97 | + setTimeout(() => { | ||
| 98 | + scrollTop.style.opacity = 1; | ||
| 99 | + }, 1); | ||
| 100 | + } else if (scrollTopShowing && document.body.scrollTop < scrollTopBreakpoint) { | ||
| 101 | + scrollTop.style.opacity = 0; | ||
| 102 | + scrollTopShowing = false; | ||
| 103 | + setTimeout(() => { | ||
| 104 | + scrollTop.style.display = 'none'; | ||
| 105 | + }, 500); | ||
| 106 | + } | ||
| 107 | + }); | ||
| 108 | + | ||
| 86 | }); | 109 | }); |
| 87 | 110 | ||
| 88 | 111 | ... | ... |
| ... | @@ -127,3 +127,41 @@ $loadingSize: 10px; | ... | @@ -127,3 +127,41 @@ $loadingSize: 10px; |
| 127 | padding-right: $-s; | 127 | padding-right: $-s; |
| 128 | } | 128 | } |
| 129 | } | 129 | } |
| 130 | + | ||
| 131 | +// Back to top link | ||
| 132 | +$btt-size: 40px; | ||
| 133 | +#back-to-top { | ||
| 134 | + background-color: rgba($primary, 0.4); | ||
| 135 | + position: fixed; | ||
| 136 | + bottom: $-m; | ||
| 137 | + right: $-m; | ||
| 138 | + padding: $-xs $-s; | ||
| 139 | + cursor: pointer; | ||
| 140 | + color: #FFF; | ||
| 141 | + width: $btt-size; | ||
| 142 | + height: $btt-size; | ||
| 143 | + border-radius: $btt-size; | ||
| 144 | + transition: all ease-in-out 180ms; | ||
| 145 | + opacity: 0; | ||
| 146 | + z-index: 999; | ||
| 147 | + &:hover { | ||
| 148 | + width: $btt-size*3.4; | ||
| 149 | + background-color: rgba($primary, 1); | ||
| 150 | + span { | ||
| 151 | + display: inline-block; | ||
| 152 | + } | ||
| 153 | + } | ||
| 154 | + .inner { | ||
| 155 | + width: $btt-size*3.4; | ||
| 156 | + } | ||
| 157 | + i { | ||
| 158 | + margin: 0; | ||
| 159 | + font-size: 28px; | ||
| 160 | + padding: 0 $-s 0 0; | ||
| 161 | + } | ||
| 162 | + span { | ||
| 163 | + line-height: 12px; | ||
| 164 | + position: relative; | ||
| 165 | + top: -5px; | ||
| 166 | + } | ||
| 167 | +} | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -77,6 +77,11 @@ | ... | @@ -77,6 +77,11 @@ |
| 77 | @yield('content') | 77 | @yield('content') |
| 78 | </section> | 78 | </section> |
| 79 | 79 | ||
| 80 | + <div id="back-to-top"> | ||
| 81 | + <div class="inner"> | ||
| 82 | + <i class="zmdi zmdi-chevron-up"></i> <span>Back to top</span> | ||
| 83 | + </div> | ||
| 84 | + </div> | ||
| 80 | @yield('bottom') | 85 | @yield('bottom') |
| 81 | <script src="{{ versioned_asset('js/common.js') }}"></script> | 86 | <script src="{{ versioned_asset('js/common.js') }}"></script> |
| 82 | @yield('scripts') | 87 | @yield('scripts') | ... | ... |
-
Please register or sign in to post a comment