CCHub Logo CCHub Tailwind Collection
Komponenten Zurück zum Anfang Schaltfläche Zurück zum Anfang Schaltfläche

Zurück zum Anfang Schaltfläche

Eine minimalistische und reaktionsschnelle "Zurück zum Anfang"-Schaltflächenkomponente mit Unterstützung für den Dunkelmodus. Es wird nach dem Scrollen nach unten angezeigt und verwendet ein sanftes Scrollen, um den Benutzer beim Klicken an den Anfang der Seite zurückzubringen. Für das Scrollen wird kein JavaScript verwendet, sondern nur CSS.

Vorschau

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>

Verwandte Komponenten

Skeuomorphe Schaltfläche "Zurück zum Anfang"

Eine einfache, reaktionsschnelle und skeumorphe "Zurück zum Anfang"-Schaltflächenkomponente für Foren-/Community-Plattformen, die mit einer Wald-/Grün-Farbpalette und vollständiger Unterstützung des Dunkelmodus ausgestattet ist.

Offen

Zurück zum Anfang Schaltflächenkomponente

Ein responsiver "Zurück zum Anfang"-Button, der den Prinzipien von Material Design folgt und den Dunkelmodus mit Tailwind CSS für Styling und reaktionsschnelle Effekte unterstützt.

Offen

Zurück zum Anfang Schaltfläche

Schaltfläche "Zurück zum Anfang" mit neumorphem Design, monochromatischem Farbschema und Unterstützung für den Dunkelmodus. Verwendet Tailwind CSS.

Offen