This page was translated automatically from the English original.
View the original
Ajouter un bouton flottant de retour en haut
Comment ajouter un bouton flottant qui fait défiler jusqu'en haut d'une page ?
Table of Contents
Comment créer un bouton de retour en haut
Étape 1) Ajouter le HTML :
Créez un bouton qui ramènera l’utilisateur en haut de la page lorsqu’il est cliqué :
<!-- Sidebar-right.html -->
<!-- Back to Top -->
<button
onclick="backToTopBtn()"
id="backToTopBtn"
title="Go to top"
class="btn btn-primary"
>
Back to top
↑
</button>
Étape 2) Ajouter le CSS :
Styliser le bouton :
// Floating back to top button
#backToTopBtn {
display: block; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: $primary; /* Set a background color */
color: inherit; /* Text color */
opacity: 50%;
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#backToTopBtn {
.text {
display: inline-block;
}
.arrow {
display: none;
}
@media (max-width: 600px) {
.text {
display: none;
}
.arrow {
display: inline-block;
}
}
}
#backToTopBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
opacity: 100%;
}
Ajouter le JavaScript
// assets/js/back-to-top.js
document.addEventListener("DOMContentLoaded", (event) => {
let mybutton = document.getElementById("backToTopBtn");
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
mybutton.style.opacity = "75%";
}
if (mybutton) {
mybutton.onclick = topFunction;
}
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
});
Ajouter la source JS dans head
<!-- includes/head.html -->
<!-- Custom JS Scripts -->
<script src="/assets/js/back-to-top.js"></script>