Retour en haut du bouton
Un composant de bouton « Retour en haut » minimal et réactif avec prise en charge du mode sombre. Il apparaît après avoir fait défiler vers le bas et utilise un défilement fluide pour ramener l’utilisateur en haut de la page lorsqu’il clique dessus. Aucun JavaScript n’est utilisé pour le défilement, seulement du CSS.
HTML Code
<div class="fixed bottom-4 right-4">
<a href="#" class="bg-blue-500 text-white p-3 rounded-full shadow-md transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-blue-700 dark:text-gray-200">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
</a>
</div>
<style>
/* This simple example uses CSS for smooth scrolling. For a production site, you might use a small amount of JavaScript for better compatibility and control over the scroll behavior and when the button appears. */
html {
scroll-behavior: smooth;
}
/* Basic example to show/hide the button based on scroll position.
A robust solution would involve JavaScript Intersection Observer or scroll events. */
body:before {
content: "";
height: 200vh; /* Simulate a long page */
display: block;
}
.group-hover\:opacity-100:hover + .fixed a {
opacity: 1; /* This part is flawed for demonstrating scroll-based visibility without JS */
}
/* A better approach for scroll-based visibility would require JavaScript */
.fixed a {
/* Initially hidden, JS would make it visible on scroll */
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
</style>Composants associés
Brutalisme Retour en haut de la page
Un composant de bouton brutaliste de retour en haut utilisant des couleurs en niveaux de gris et Tailwind CSS. Il est réactif et prend en charge le mode sombre.
Retour en haut du bouton
Un bouton simple et élégant de retour en haut qui apparaît fixe dans le coin inférieur droit de l’écran. Dispose d’une palette de couleurs pastel subtile et de micro-interactions fluides. Le bouton comprend un design réactif avec prise en charge intégrée du mode sombre. Lorsqu’il est survolé, le bouton s’agrandit doucement et change de couleur d’arrière-plan pour fournir un retour visuel. Le composant utilise uniquement les classes CSS Tailwind, sans JavaScript requis.
Retour en haut de la page Composant du bouton
Un composant de bouton Retour en haut de style brutaliste utilisant Tailwind CSS. Ce composant a un design audacieux et contrasté et prend en charge les effets réactifs et le thème sombre.