diff --git a/layouts/_default/single.html b/layouts/_default/single.html index f296804..e4f4fbb 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -77,6 +77,8 @@ + + {{ if .IsTranslated }} {{ partial "navigators/floating-lang-selector.html" . }} {{ end }} diff --git a/static/css/layouts/single.css b/static/css/layouts/single.css index 37196d4..4607087 100644 --- a/static/css/layouts/single.css +++ b/static/css/layouts/single.css @@ -313,6 +313,31 @@ mark { display: none; } + +#scroll-to-top{ + position: fixed; + bottom: 0rem; + right: 1rem; + color:#248aaa; + font-size: 24pt; + z-index: 900000; + visibility: hidden; +} + +#scroll-to-top i{ + box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); + background-color: #f9f9f9; + border-radius: 50%; +} + +#scroll-to-top:hover{ + color: #2098d1; +} + +#scroll-to-top.show{ + visibility: visible; +} + /* ============= Device specific fixes ======= */ /* Large screens such as TV */ @@ -419,6 +444,9 @@ mark { /* Medium devices (tablets, 768px and up) */ @media only screen and (max-width: 768px) { + #scroll-to-top{ + right: 8rem; + } } /* Small devices (landscape phones, 576px and up) */ diff --git a/static/js/single.js b/static/js/single.js index 0699dd2..149049f 100644 --- a/static/js/single.js +++ b/static/js/single.js @@ -59,5 +59,23 @@ var isMobile = false, isTablet = false, isLaptop = false; elems[i].classList.add("nav-link"); } + // add scroll to top button + function scrollToTop() { + var btn = $('#scroll-to-top'); + $(window).scroll(function () { + if ($(window).scrollTop() > 300) { + btn.addClass('show'); + } else { + btn.removeClass('show'); + } + }); + + btn.on('click', function (e) { + e.preventDefault(); + $('html, body').animate({ scrollTop: 0 }, '300'); + }); + } + scrollToTop(); + }); })(jQuery);