Ce snippet HTML, CSS et JavaScript permet d’ajouter un bouton "Retour en haut" sur un site web.
Le bouton apparaît lorsque l’utilisateur fait défiler la page, puis permet de remonter en haut du site avec une animation fluide.
C’est une fonctionnalité très utilisée sur :
- les blogs
- les sites d’articles
- les pages longues
- les documentations
Snippet
HTML
<button id="scrollTopBtn">↑</button>CSS
<a href="/search.php?q=scrolltopbtn" class="hashtag">#scrollTopBtn</a> {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
background: <a href="/search.php?q=2563eb" class="hashtag">#2563eb</a>;
color: white;
border: none;
padding: 12px 16px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
transition: background 0.3s;
}
<a href="/search.php?q=scrolltopbtn" class="hashtag">#scrollTopBtn</a>:hover {
background: <a href="/search.php?q=1e4fd1" class="hashtag">#1e4fd1</a>;
}
JavaScript
const btn = document.getElementById("scrollTopBtn");
window.onscroll = function() {
if (document.documentElement.scrollTop > 200) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
};
btn.onclick = function() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
};
Fonctionnement
Le script surveille la position de la page.
- Si l’utilisateur descend de plus de 200px, le bouton apparaît.
- Quand il clique dessus, la page remonte en haut avec un scroll fluide.
Pourquoi utiliser ce bouton
Ce bouton améliore l’expérience utilisateur, surtout sur les pages longues.
Avantages :
- navigation plus rapide
- meilleure ergonomie
- pratique sur mobile
C’est devenu un élément standard du web moderne.
Idée d’utilisation
Très utile pour :
- blogs
- sites d’actualité
- tutoriels
- documentation technique
- pages longues
#javascript #html #css #snippet #webdesign #developpementweb
