Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

Scroll-to-Top-Funktion mit CSS3 animieren

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

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 CSS3 noch ein wenig schöner und dynamischer gestalten.

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:

Finde einen Job, den du liebst zum Thema CSS3

Alle Jobs zum Thema CSS3
8 Reaktionen
ntiedt
ntiedt

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

ntiedt
ntiedt

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

Antworten

Emanuel
Emanuel

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

Oink
Oink

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

Antworten

chillma
chillma

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

multimediamixer
multimediamixer

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

Antworten

wowawebdesign
wowawebdesign

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

Marc
Marc

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

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen