Add back to top (#213)
* translate_Chinese * translate_Chinese * Add one-click return to the top function on the article page Signed-off-by: Ray <Chow-Ray@outlook.com> * Fix scroll-to-top button Signed-off-by: hossainemruz <hossainemruz@gmail.com> Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
This commit is contained in:
parent
0848be17ba
commit
62ca383b8b
3 changed files with 48 additions and 0 deletions
|
@ -77,6 +77,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!--scroll back to top-->
|
||||||
|
<a id="scroll-to-top" class="btn"><i class="fas fa-chevron-circle-up"></i></a>
|
||||||
{{ if .IsTranslated }}
|
{{ if .IsTranslated }}
|
||||||
{{ partial "navigators/floating-lang-selector.html" . }}
|
{{ partial "navigators/floating-lang-selector.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -313,6 +313,31 @@ mark {
|
||||||
display: none;
|
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 ======= */
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
/* Large screens such as TV */
|
/* Large screens such as TV */
|
||||||
|
@ -419,6 +444,9 @@ mark {
|
||||||
/* Medium devices (tablets, 768px and up) */
|
/* Medium devices (tablets, 768px and up) */
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
@media only screen and (max-width: 768px) {
|
||||||
|
#scroll-to-top{
|
||||||
|
right: 8rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
|
@ -59,5 +59,23 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
||||||
elems[i].classList.add("nav-link");
|
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);
|
})(jQuery);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue