Skip to content

Commit f6bf6d0

Browse files
authored
refactor: improve JS/HTML for button back2top (#1054)
The current "back to top" button is built by `<a>` tag, it would be more appropriate to replace it with the `<button>` tag.
1 parent bef2ac0 commit f6bf6d0

File tree

2 files changed

+11
-8
lines changed

2 files changed

+11
-8
lines changed

_javascript/modules/components/back-to-top.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,18 @@
33
*/
44

55
export function back2top() {
6-
$(window).on('scroll', () => {
7-
if ($(window).scrollTop() > 50) {
8-
$('#back-to-top').fadeIn();
6+
const $window = $(window);
7+
const $btn = $('#back-to-top');
8+
9+
$window.on('scroll', () => {
10+
if ($window.scrollTop() > 50) {
11+
$btn.fadeIn();
912
} else {
10-
$('#back-to-top').fadeOut();
13+
$btn.fadeOut();
1114
}
1215
});
1316

14-
$('#back-to-top').on('click', () => {
15-
window.scrollTo(0, 0);
17+
$btn.on('click', () => {
18+
$window.scrollTop(0);
1619
});
1720
}

_layouts/default.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@
3434

3535
<div id="mask"></div>
3636

37-
<a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
37+
<button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
3838
<i class="fas fa-angle-up"></i>
39-
</a>
39+
</button>
4040

4141
{% if site.pwa.enabled %}
4242
<div

0 commit comments

Comments
 (0)