asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: improve JS/HTML for button back2top (#1054)

Browse source 
The current "back to top" button is built by `<a>` tag, it would be more appropriate to replace it with the `<button>` tag.
This commit is contained in:
Cotes Chung 2023-05-20 01:07:18 +08:00 committed by GitHub
parent bef2ac085e
commit f6bf6d0864
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
_javascript/modules/components/back-to-top.js
View file

@ -3,15 +3,18 @@
*/
export function back2top() {
$(window).on('scroll', () => {
if ($(window).scrollTop() > 50) {
$('#back-to-top').fadeIn();
const $window = $(window);
const $btn = $('#back-to-top');
$window.on('scroll', () => {
if ($window.scrollTop() > 50) {
$btn.fadeIn();
} else {
$('#back-to-top').fadeOut();
$btn.fadeOut();
}
});
$('#back-to-top').on('click', () => {
window.scrollTo(0, 0);
$btn.on('click', () => {
$window.scrollTop(0);
});
}

4
_layouts/default.html
View file

@ -34,9 +34,9 @@ layout: compress
<div id="mask"></div>
<a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
<button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
<i class="fas fa-angle-up"></i>
</a>
</button>
{% if site.pwa.enabled %}
<div