diff --git a/src/js/common.js b/src/js/common.js index 98cebc1b..f87c40f5 100644 --- a/src/js/common.js +++ b/src/js/common.js @@ -1,5 +1,21 @@ $(document).ready(function() { initializeStartupConfiguration(); + + // Scroll to Top button script + $(window).scroll(function() { + if ($(this).scrollTop() > 200) { + $('#scrollToTopBtn').fadeIn(); + } else { + $('#scrollToTopBtn').fadeOut(); + } + }); + + $('#scrollToTopBtn').click(function() { + $('body, html').animate({ + scrollTop: 0 + }, 800); + return false; + }) }); /** diff --git a/src/scss/_global.scss b/src/scss/_global.scss index 24015064..7b3de778 100644 --- a/src/scss/_global.scss +++ b/src/scss/_global.scss @@ -118,35 +118,29 @@ body.fixed-nav { padding-top: 1rem; } -// Scroll to top button -.scroll-to-top { - position: fixed; - right: 15px; - bottom: 3px; - - display: none; - - width: 50px; - height: 50px; - text-align: center; - color: white; - background: fade-out($gray-800, .5); +// Scroll to Top Button +#scrollToTopBtn { + position: fixed; + right: 30px; + bottom: 50px; + padding: 4px 8px; + background-color: #0044cc; + color: #fff; + opacity: 0.5; + display: none; + z-index: 9; - line-height: 45px; - &:focus, &:hover { - color: white; - } - &:hover { - background: $gray-800; - } - i { - font-weight: 800; + opacity: 1; } } +@media (max-width: 785px){ + #scrollToTopBtn{bottom: 75px;} +} + .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { diff --git a/views/includes/footer.pug b/views/includes/footer.pug index 00555b95..970faff3 100644 --- a/views/includes/footer.pug +++ b/views/includes/footer.pug @@ -8,3 +8,6 @@ footer.sticky-footer a(href='http://intermine.org/' target='_blank') InterMine | & a(href='http://cam.ac.uk/' target='_blank') University of Cambridge + #scrollBtnWrapper + a#scrollToTopBtn.btn.scrollToTopBtn(href='#' role='button') + i.fa.fa-chevron-up \ No newline at end of file