Dan Brown

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.
...@@ -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')
......