Vorheriger Artikel Nächster Artikel

Scroll-to-Top-Funktion mit CSS3 animieren

Webseiten werden immer länger, und wer seine Besucher nicht mit Scroll-Orgien überfordern will, für den bietet sich ein "Scroll to Top"-Button am Ende einer Seite oder am Ende einzelner Abschnitte an. Diese Funktion lässt sich mithilfe von noch ein wenig schöner und dynamischer gestalten.

Scroll-to-Top-Funktion mit CSS3 animieren

Trend geht zu längeren Webseiten

Gerade durch neue Gestaltungsmöglichkeiten im Webdesign tendieren viele Webseiten wieder zu längeren Inhalten, ohne Paginierung. Das mag zwar teilweise optisch sehr schick aussehen, wirft aber ein Problem auf, wenn der User wieder zum Menü bzw. zum Header zurückkehren möchte. Dazu muss er erst lange wieder nach oben scrollen. Um das zu umgehen bieten sich sogenannte „Scroll to Top“-Buttons an, die den Nutzer sofort wieder zum Anfang der Seite bringen.

Eine Scroll-to-Top-Funktion kann mit CSS3 sehr ansehnlich animiert werden.

Schönerer Effekt mit CSS3-Animations

Obwohl sich diese bereits mit jQuery-Bordmitteln realisieren lassen, gibt es noch wesentlich mehr Möglichkeiten diesen Effekt mittels CSS3 zu animieren. Einige Möglichkeiten dazu beschreibt der algerische Entwickler Mahieddine Abdelkader auf seiner Webseite. Auf der entsprechenden Demo-Webseite können drei Beispiele betrachtet werden, wie die Funktion elegant animiert werden kann.

Weiterführende Links:

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
8 Antworten
  1. von Marc am 06.02.2013 (17:03 Uhr)

    Demo geht auf 27" nicht. :-)
    Browser verkleinern dann gehts.

    Antworten Teilen
  2. von wowawebdesign am 06.02.2013 (17:15 Uhr)

    Hm, für diese Lösung brauche ich jQuery mit einem wesentlich längeren und komplizierterem Code. Da bleibe ich doch lieber bei der bewährten, einfachen jQuery-Methode.

    Antworten Teilen
  3. von multimediamixer am 06.02.2013 (17:28 Uhr)

    Aus Usersicht muss das besser oder es lohnt den aufriss nicht.

    Antworten Teilen
  4. von chillma am 07.02.2013 (05:52 Uhr)

    sieht für mich nicht nach einem Mehrwert aus. Ich dachte man würde komplett auf JS verzichten. Da ist die kürzere Version auch in Ordnung

    Antworten Teilen
  5. von Oink am 07.02.2013 (07:24 Uhr)

    Schade eine reine CSS3 wäre interessant gewesen ....

    Antworten Teilen
  6. von Emanuel am 07.02.2013 (08:25 Uhr)

    Die CSS3-Lösung macht das ganze besonders für mobile Geräte interessant, die mit der klassischen $.fn.animate-Orgie eher hakelig unterwegs sind.

    Allerdings sollte man das ganze nicht an <li>-Elemente klatschen, sondern vernünftige <a href="#">-Elemente als Go-Top-Buttons nehmen.

    Antworten Teilen
  7. von ntiedt am 07.02.2013 (09:59 Uhr)

    Also wenn ich per No-Script Javascript deaktiviere tut sich rein gar nichts was gegen eine reine CSS3-Lösung spricht.

    Antworten Teilen
  8. von ntiedt am 07.02.2013 (10:02 Uhr)

    Wenn man sich den Quelltext mal kurz anschaut ist da ein Script namens "js/goTop.js" inkludiert.
    D.h. es ist definitiv keine reine CSS3-Lösung.
    Bitte T3N recherchiert richtig bevor Ihr hoaxes publiziert.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS3
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor … » weiterlesen

CSS3: Coole Animationen für im Grid angeordnete Bilder
CSS3: Coole Animationen für im Grid angeordnete Bilder

Mit HTML5 und CSS3 stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein … » weiterlesen

t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3

Heute startet auf t3n.de eine neue Serie, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen