Rajoute un bouton pour revenir en haut de la page

This commit is contained in:
Tom Hubrecht 2021-08-20 12:12:36 +02:00
parent b55d398bf8
commit 779bf7bf44
4 changed files with 36 additions and 1 deletions

View file

@ -10586,4 +10586,10 @@ body {
background-color: #ffdd57;
}
#scroll-button {
position: fixed;
bottom: 2em;
right: 2em;
}
/*# sourceMappingURL=main.css.map */

File diff suppressed because one or more lines are too long

View file

@ -46,3 +46,8 @@ body
.message-body
hr
background-color: $warning
#scroll-button
position: fixed
bottom: 2em
right: 2em

View file

@ -103,12 +103,36 @@
});
});
// Scroll to top button
$up_btn = document.getElementById('scroll-button');
window.onscroll = () => {
if (document.documentElement.scrollTop >= 30) {
$up_btn.classList.remove('is-hidden');
} else {
$up_btn.classList.add('is-hidden');
}
}
$up_btn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
});
});
</script>
</head>
<body>
<button id="scroll-button" class="button is-hidden has-tooltip" data-tooltip="{% trans "Revenir en haut de la page" %}">
<span class="icon is-large has-text-primary">
<i class="fas fa-2x fa-chevron-circle-up"></i>
</span>
</button>
<nav class="level has-background-primary">
<div class="level-left px-4">
<div class="level-item">