Rajoute un bouton pour revenir en haut de la page
This commit is contained in:
parent
b55d398bf8
commit
779bf7bf44
4 changed files with 36 additions and 1 deletions
|
@ -10586,4 +10586,10 @@ body {
|
||||||
background-color: #ffdd57;
|
background-color: #ffdd57;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#scroll-button {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 2em;
|
||||||
|
right: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=main.css.map */
|
/*# sourceMappingURL=main.css.map */
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -46,3 +46,8 @@ body
|
||||||
.message-body
|
.message-body
|
||||||
hr
|
hr
|
||||||
background-color: $warning
|
background-color: $warning
|
||||||
|
|
||||||
|
#scroll-button
|
||||||
|
position: fixed
|
||||||
|
bottom: 2em
|
||||||
|
right: 2em
|
||||||
|
|
|
@ -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>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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">
|
<nav class="level has-background-primary">
|
||||||
<div class="level-left px-4">
|
<div class="level-left px-4">
|
||||||
<div class="level-item">
|
<div class="level-item">
|
||||||
|
|
Loading…
Reference in a new issue