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.
This commit is contained in:
Dan Brown 2016-02-08 20:42:41 +00:00
parent 9b83c57316
commit e0279f93f9
3 changed files with 66 additions and 0 deletions

View File

@ -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);
}
});
});

View File

@ -127,3 +127,41 @@ $loadingSize: 10px;
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;
}
}

View File

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