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() { export function back2top() {
$(window).on('scroll', () => { const $window = $(window);
if ($(window).scrollTop() > 50) { const $btn = $('#back-to-top');
$('#back-to-top').fadeIn();
$window.on('scroll', () => {
if ($window.scrollTop() > 50) {
$btn.fadeIn();
} else { } else {
$('#back-to-top').fadeOut(); $btn.fadeOut();
} }
}); });
$('#back-to-top').on('click', () => { $btn.on('click', () => {
window.scrollTo(0, 0); $window.scrollTop(0);
}); });
} }

4
_layouts/default.html
View file

@ -34,9 +34,9 @@ layout: compress
<div id="mask"></div> <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> <i class="fas fa-angle-up"></i>
</a> </button>
{% if site.pwa.enabled %} {% if site.pwa.enabled %}
<div <div