Smooth nach oben scrollen mit JQuery und CSS

Smooth nach oben scrollen mit JQuery und CSS

smooth-nach-oben-scrollen-mit-jquery-und-css

Wenn man auf seiner Seite viel Inhalt bietet, kann es von Vorteil sein, dem Nutzer einen einfachen Weg zu bieten wieder mit einem Klick nach oben zu kommen. Und genau das will ich euch heute mal beschreiben. Keine Angst, dafür braucht man keinerlei Vorkentnisse und alles lässt sich im Prinzip kopieren. Allerdings sollte man zumindest den CSS Teil noch an seine eigenen Bedürfnisse anpassen.

Als erstes brauchen wir den Link auf den man dann später klicken soll um wieder nach oben zu gelangen.

Jetzt passen wir unsere style.css Datei an, um die Position und das Bild zu bestimmen. Hier erstmal der komplette Code, danach erkläre ich noch etwas dazu:

Wie ihr seht, habe ich eine feste Position für die Grafik festgelegt, damit müsst ihr dann nach belieben rumspielen. Die könnt ihr übrigens hier runterladen. Wichtig ist für den weiteren Verlauf, dass wir die Grafik erstmal mit display: none; ausblenden. Denn jetzt kommen wir zum JQuery Code, den man am Besten im Footer platzieren sollte.

Mit diesem Code Schnipsel legen wir fest, dass die Grafik erst eingeblendet wird, wenn der Nutzer 100 Pixel gescrollt hat. Denn erst ab dann macht so ein Button Sinn. Doch bisher springt die Seite bei einem Klick unschön und abrupt nach oben. Doch auch das lässt sich mit JQuery lösen:

Mit dieser Funktion scrollt man mit einer schönen, smoothen Bewegung wieder nach oben. Testen könnt ihr das ganze natürlich gleich hier auf meiner Seite. Und jetzt noch der Schnipsel für den Footer, denn ihr so wie er ist kopieren könnt.

Wenn es Fragen gibt, Anregungen oder sonstiges, hinterlasst mir einen Kommentar, ich freu mich drüber.

via gazpo.com

The following two tabs change content below.

Philipp

Ich hab den Laden hier ins Leben gerufen, das Design gebastelt und die Autoren bezirzt. Dafür gibt es bei uns keine beschönigten News, sondern nur ehrliche Meinungen. Wer das verträgt, ist herzlich Willkommen!