diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js index 00c5f13c2..a61299d21 100644 --- 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 c419c08b6..b81e43296 100644 --- 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 a2979f858..2dfa7ddfd 100644 --- a/resources/views/base.blade.php +++ b/resources/views/base.blade.php @@ -77,6 +77,11 @@ @yield('content') +